1. Login Ke Blogger
2. Pilih Tata Letak/Rancangan
3. Pilih Tab EDIT HTML
4. Centang Expand Template Widget
5. Cari Kode ]]></b:skin> dan simpan Kode berikut di atasnya:
/* Image Slideshow */
#s3slider{margin-bottom:5px; width:100%; height:250px; position:relative; word-wrap:break-word; overflow:hidden; }
#s3sliderContent{width:100%; position:absolute; top:0; margin:0px; padding-left:0px; }
.s3sliderImage{float:left; position:relative; display:none; }
.s3sliderImage span{position:absolute; left:0; font:normal 11px 'Arial',Helvetica,sans-serif; padding:10px; width:100%; text-align:center; padding-left:0px; background-color:#000; filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity:0.7; opacity:0.7; color:#fff; display:none; top:0; }
6. Kemudian cari kode </head> dan simpan kode berikut di atasnya :
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var cssdropdown={disappeardelay:250,dropdownindicator:'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdUwFymiE7B9oz15DMr4xz0LVOwkq5D0NL_rnQnK0oQwG2H2WSmXnKA9x9V6pU4JOX3aSNupw74tYtz1FEiZv2eM6FIiK14951Z6KQZCPoO_E3wZkiHxltQSSKPaAzV7vrf8kJQz3Q-CQ/s1600/panah+kucobadotcom.jpg" border="0" />',enablereveal:[true,8],enableiframeshim:1,dropmenuobj:null,asscmenuitem:null,domsupport:document.all||document.getElementById,standardbody:null,iframeshimadded:false,revealtimers:{},getposOffset:function(d,c){var b=(c=="left")?d.offsetLeft:d.offsetTop;var a=d.offsetParent;while(a!=null){b=(c=="left")?b+a.offsetLeft:b+a.offsetTop;a=a.offsetParent}return b},css:function(b,a,c){var d=new RegExp("(^|\\s+)"+a+"($|\\s+)","ig");if(c=="check"){return d.test(b.className)}else{if(c=="remove"){b.className=b.className.replace(d,"")}else{if(c=="add"&&!d.test(b.className)){b.className+=" "+a}}}},showmenu:function(b,a){if(this.enablereveal[0]){if(!b._trueheight||b._trueheight<10){b._trueheight=b.offsetHeight}clearTimeout(this.revealtimers[b.id]);b.style.height=b._curheight=0;b.style.overflow="hidden";b.style.visibility="visible";this.revealtimers[b.id]=setInterval(function(){cssdropdown.revealmenu(b)},10)}else{b.style.visibility="visible"}this.css(this.asscmenuitem,"selected","add")},revealmenu:function(f,d){var e=f._curheight,b=f._trueheight,a=this.enablereveal[1];if(e<b){var c=Math.min(e,b);f.style.height=c+"px";f._curheight=c+Math.round((b-c)/a)+1}else{f.style.height="auto";f.style.overflow="hidden";clearInterval(this.revealtimers[f.id])}},clearbrowseredge:function(f,d){var c=0;if(d=="rightedge"){var e=document.all&&!window.opera?this.standardbody.scrollLeft+this.standardbody.clientWidth-15:window.pageXOffset+window.innerWidth-15;var b=this.dropmenuobj.offsetWidth;if(e-this.dropmenuobj.x<b){c=b-f.offsetWidth}}else{var a=document.all&&!window.opera?this.standardbody.scrollTop:window.pageYOffset;var e=document.all&&!window.opera?this.standardbody.scrollTop+this.standardbody.clientHeight-15:window.pageYOffset+window.innerHeight-18;var g=this.dropmenuobj._trueheight;if(e-this.dropmenuobj.y<g){c=g+f.offsetHeight;if((this.dropmenuobj.y-a)<g){c=this.dropmenuobj.y+f.offsetHeight-a}}}return c},dropit:function(c,b,a){if(this.dropmenuobj!=null){this.hidemenu()}this.clearhidemenu();this.dropmenuobj=document.getElementById(a);this.asscmenuitem=c;this.showmenu(this.dropmenuobj,b);this.dropmenuobj.x=this.getposOffset(c,"left");this.dropmenuobj.y=this.getposOffset(c,"top");this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(c,"rightedge")+"px";this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(c,"bottomedge")+c.offsetHeight+1+"px";this.positionshim()},positionshim:function(){if(this.iframeshimadded){if(this.dropmenuobj.style.visibility=="visible"){this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px";this.shimobject.style.height=this.dropmenuobj._trueheight+"px";this.shimobject.style.left=parseInt(this.dropmenuobj.style.left)+"px";this.shimobject.style.top=parseInt(this.dropmenuobj.style.top)+"px";this.shimobject.style.display="block"}}},hideshim:function(){if(this.iframeshimadded){this.shimobject.style.display="none"}},isContained:function(a,b){var b=window.event||b;var d=b.relatedTarget||((b.type=="mouseover")?b.fromElement:b.toElement);while(d&&d!=a){try{d=d.parentNode}catch(b){d=a}}if(d==a){return true}else{return false}},dynamichide:function(a,b){if(!this.isContained(a,b)){this.delayhidemenu()}},delayhidemenu:function(){this.delayhide=setTimeout("cssdropdown.hidemenu()",this.disappeardelay)},hidemenu:function(){this.css(this.asscmenuitem,"selected","remove");this.dropmenuobj.style.visibility="hidden";this.dropmenuobj.style.left=this.dropmenuobj.style.top="-1000px";this.hideshim()},clearhidemenu:function(){if(this.delayhide!="undefined"){clearTimeout(this.delayhide)}},addEvent:function(b,c,a){if(b.addEventListener){b.addEventListener(a,c,false)}else{if(b.attachEvent){b.attachEvent("on"+a,function(){return c.call(b,window.event)})}}},startchrome:function(){if(!this.domsupport){return}this.standardbody=(document.compatMode=="CSS1Compat")?document.documentElement:document.body;for(var d=0;d<arguments.length;d++){var g=document.getElementById(arguments[d]).getElementsByTagName("a");for(var b=0;b<g.length;b++){if(g[b].getAttribute("rel")){var a=g[b].getAttribute("rel");var c=document.getElementById(a);this.addEvent(c,function(){cssdropdown.clearhidemenu()},"mouseover");this.addEvent(c,function(h){cssdropdown.dynamichide(this,h)},"mouseout");this.addEvent(c,function(){cssdropdown.delayhidemenu()},"click");try{g[b].innerHTML=g[b].innerHTML+" "+this.dropdownindicator}catch(f){}this.addEvent(g[b],function(i){if(!cssdropdown.isContained(this,i)){var h=window.event||i;cssdropdown.dropit(this,h,this.getAttribute("rel"))}},"mouseover");this.addEvent(g[b],function(h){cssdropdown.dynamichide(this,h)},"mouseout");this.addEvent(g[b],function(){cssdropdown.delayhidemenu()},"click")}}}if(this.enableiframeshim&&document.all&&!window.XDomainRequest&&!this.iframeshimadded){document.write('<IFRAME id="iframeshim" src="about:blank" frameBorder="0" scrolling="no" style="left:0; top:0; position:absolute; display:none;z-index:90; background: transparent;"></IFRAME>');this.shimobject=document.getElementById("iframeshim");this.shimobject.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)";this.iframeshimadded=true}}};
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
(function(a){a.fn.s3Slider=function(h){var e=this;var l=(h.timeOut!=undefined)?h.timeOut:4000;var g=null;var d=null;var k=true;var f=false;var i=a("#"+e[0].id+"Content ."+e[0].id+"Image");var b=a("#"+e[0].id+"Content ."+e[0].id+"Image span");i.each(function(m){a(i[m]).mouseover(function(){f=true});a(i[m]).mouseout(function(){f=false;c(true)})});var c=function(m){var n=(m)?(l/2):l;n=(k)?10:n;if(i.length>0){d=setTimeout(j,n)}else{console.log("Poof..")}};var j=function(){g=(g!=null)?g:i[(i.length-1)];var m=jQuery.inArray(g,i)+1;m=(m==i.length)?0:(m-1);var n=a(e).width()*m;if(k==true){if(!f){a(i[m]).fadeIn((l/6),function(){if(a(b[m]).css("bottom")==0){a(b[m]).slideUp((l/6),function(){k=false;g=i[m];if(!f){c(false)}})}else{a(b[m]).slideDown((l/6),function(){k=false;g=i[m];if(!f){c(false)}})}})}}else{if(!f){if(a(b[m]).css("bottom")==0){a(b[m]).slideDown((l/6),function(){a(i[m]).fadeOut((l/6),function(){k=true;g=i[(m+1)];if(!f){c(false)}})})}else{a(b[m]).slideUp((l/6),function(){a(i[m]).fadeOut((l/6),function(){k=true;g=i[(m+1)];if(!f){c(false)}})})}}}};j()}})(jQuery);
//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 3000
});
}); </script>
7. Lalu Save Template.
Keterangan :
- Kode timeOut: 3000 adalah waktu pergantian image.
Langkah Kedua:
Untuk Bisa Menikmati widget ini silakan perhatikan instruksi di bawah ini :
1. Login ke Blogger
2. Pilih Tata Letak Atau Rancangan
3. Pilih Tab Edit HTML
4. Jangan Lupa Untuk buat Back up data anda
5. Centang expand template widget
6. Cari Kode ini <div id='main-wrapper'>
Tekan Ctrl+F untuk mempermudahnya
7. Copy kode di bawah ini dan Paste tepat di bawah kode <div id='main-wrapper'>
<b:if cond='data:blog.pageType != "item"'>
<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage'>
<a href='#'>
<img height='245'
src='#'
width='450'/>
<span>Isi dengan kalimat yang ingin ditampilkan.</span></a></li>
<li class='s3sliderImage'>
<a href='#'>
<img height='245'
src='#'
width='450'/>
<span>Isi dengan kalimat yang ingin ditampilkan.</span></a></li>
<li class='s3sliderImage'>
<a href='URL Image yang ditampilkan'>
<img height='245'
src='#'
width='450'/>
<span>Isi dengan kalimat yang ingin ditampilkan.</span></a></li>
<li class='s3sliderImage'>
<a href='#'>
<img height='245'
src='#'
width='450'/>
<span>Isi dengan kalimat yang ingin ditampilkan.</span></a></li>
<li class='s3sliderImage'>
<a href='#'>
<img height='245'
src='#'
width='450'/>
<span>Isi dengan kalimat yang ingin ditampilkan.</span></a></li>
<div class='clear s3sliderImage'/>
</ul>
</div>
</b:if>
Keterangan :
= Ganti <a href='#'> # dengan alamat link artikel kamu
= Ganti src='#' # dengan link gambar / foto
= Kode width="468" dan height="245" adalah ukuran dari widget slideshow view, (atur sesuai ukuran widget yang diinginkan)
= <span>Isi dengan kalimat yang ingin di tampilkan di atas foto.</span>
= Jumlah Slide Show bisa anda perbanyak dengan menambahkan kode
<li class='s3sliderImage'>
<a href='#'>
<img height='245'
src='#'
width='450'/>
<span>Isi dengan kalimat yang ingin ditampilkan.</span></a></li>
= Tambah kode diatas : = Di atas kode <div class='clear s3sliderImage'/> atau = dibawah kode <ul id='s3sliderContent'>
Selamat mencoba dan perhatikan apa yang terjadi.
0 komentar:
Posting Komentar