Cara Membuat Slide Show View Image/Foto
Memasang widget ini sangat mudah dan bisa di praktikan langsung bahkan oleh blogger pemula.
Sebelum memulai yuk kita bahas apa sih slide show image ini ? widget ini adalah sebuah widget yang menampilkan image secara random . akan berganti-ganti tergantung jumlah foto yang kita masukan ke dalamnya.
 |
Widget ini memiliki tampilan yang berbeda dengan dari widget slideshow sebelumnya sebab telah sedikit di modifikasi oleh kawan kita yang bernama kang salman modifikasi khususnya efek JQuery accordionnya.
salahbantal yakin widget ini lebih mudah pengunaannya dari pada yang sebelumnya.
 |
| Versi Baru, 22 Agustus 2010 |
Fitur Baru :
- Tidak membebani loading blog, dan tampil lebih 2 kali lebih cepat dari versi sebelumnya.
- Slide show yang di tampilkan lebih ciamik dan memberi warna baru pada blog anda
- Deskripsi text berada di atas foto.
- Durasi Tayang atau slide show foto. kini dapat anda setting sendiri sesuai dengan kebutuhan, Tips terkait ada di akhir artikel ini.
Langsung Aja kita simak Cara Membuat Slide show ini.
Langkah 1
1. Login ke Blogger2. Pilih Tata Letak / Rancangan
3. Pilih Tab Edit HTML
4. Centang "
5. Silakan Cari Kode ]]></b:skin> dan Taruh Kode Berikut Di atas kode ]]></b:skin>
6. Kemudian Setelah itu coba cari kode </head> dan Taruh Kode berikut, di atas kode</head>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>7. Save Template
<script type='text/javascript'>
//<![CDATA[
var cssdropdown={disappeardelay:250,dropdownindicator:'<img src="http://img40.imageshack.us/img40/6613/arrowto.gif" 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>
Langkah 2
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 Backupa 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='http://www.kucoba.com/2010/07/10-tanda-cewek-suka-ma-kita.html'>
<img height='245'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUCmwzhpTdm7y1PbdJ6kgSr1FPfRAt0SEzBULI32UUNOe6kEV2woIxkOtG5W_TMtRLdGnFbVkVvdictRvJ4L7yMP_GM99z84Eknhg_fs-m6sAcYr_0DZznnWwvg7j_Pg2yHRNgUFsyQKbQ/s1600/1.jpg'
width='450'/>
<span>Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image akhiri dengan titik.</span></a></li>
<li class='s3sliderImage'>
<a href='#'>
<img height='245'
src='#'
width='450'/>
<span>Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.</span></a></li>
<li class='s3sliderImage'>
<a href='#'>
<img height='245'
src='#'
width='450'/>
<span>Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.</span></a></li>
<li class='s3sliderImage'>
<a href='#'>
<img height='245'
src='#'
width='450'/>
<span>Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.</span></a></li>
<li class='s3sliderImage'>
<a href='#'>
<img height='245'
src='#'
width='450'/>
<span>Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.</span></a></li>
<div class='clear s3sliderImage'/>
</ul>
</div>
</b:if>
<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage'>
<a href='http://www.kucoba.com/2010/07/10-tanda-cewek-suka-ma-kita.html'>
<img height='245'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUCmwzhpTdm7y1PbdJ6kgSr1FPfRAt0SEzBULI32UUNOe6kEV2woIxkOtG5W_TMtRLdGnFbVkVvdictRvJ4L7yMP_GM99z84Eknhg_fs-m6sAcYr_0DZznnWwvg7j_Pg2yHRNgUFsyQKbQ/s1600/1.jpg'
width='450'/>
<span>Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image akhiri dengan titik.</span></a></li>
<li class='s3sliderImage'>
<a href='#'>
<img height='245'
src='#'
width='450'/>
<span>Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.</span></a></li>
<li class='s3sliderImage'>
<a href='#'>
<img height='245'
src='#'
width='450'/>
<span>Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.</span></a></li>
<li class='s3sliderImage'>
<a href='#'>
<img height='245'
src='#'
width='450'/>
<span>Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.</span></a></li>
<li class='s3sliderImage'>
<a href='#'>
<img height='245'
src='#'
width='450'/>
<span>Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.</span></a></li>
<div class='clear s3sliderImage'/>
</ul>
</div>
</b:if>
Keterangan :
- Ganti warna merah dengan alamat link artikel kamu
- Ganti warna hijau dengan link gambar / foto
- Arti kode width="468" height="245" adalah ukuran dari widget slideshow view, lebar="468" tinggi="245" (atur sesuai ukuran widget yang kamu inginkan)
- <span>Isi dengan kalimat yang ingin di tampilkan di atas foto.</span>
- Jumlah Slide Show bisa anda perbanyak dengan menambahkan kode <li><a href="#"><img height='245' src="#" width='468'/> <span>isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image jangan lupa akhiri dengan titil atau tanda kalimat lainnya .</span></a></li> di atas kode </ul>
Lihat Contoh yang kang salman buat di bawah ini :
<b:if cond='data:blog.pageType != "item"'>
<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage'>
<a href='http://www.kucoba.com/2010/07/10-tanda-cewek-suka-ma-kita.html'>
<img height='245' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUCmwzhpTdm7y1PbdJ6kgSr1FPfRAt0SEzBULI32UUNOe6kEV2woIxkOtG5W_TMtRLdGnFbVkVvdictRvJ4L7yMP_GM99z84Eknhg_fs-m6sAcYr_0DZznnWwvg7j_Pg2yHRNgUFsyQKbQ/s1600/1.jpg' width='450'/>
<span>Bagaimanakah tanda perempuan menyukai kita? hal ini selalu jadi pertanyaan setiap cowok yang ntah itu dia ke GR-an atau dia yang benar-benar mengharapkan cinta dan jawaban dari si Doi, inilah 10 tanda khusus tanda cewek ada suka ma kita</span></a></li>
<li class='s3sliderImage'>
<a href='http://www.kucoba.com/2010/07/8-pedomoan-merayu-istri.html'>
<img height='245' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5darZlGBX5qUgmqiR5PLoZ7fqLqltMf3KtpQqid8JOuaNsPAoCSTcq38K4v05eSiC4AJNGr5l8sANIIdl9xR2a7VuGH7I37saIgBE7bAclDGklCh2I5Rx3lO1hW6-YaRtgdFR-2wspfXB/s1600/2.jpg' width='450'/>
<span>8 pedoman merayu istri. Mendidik istri adalah tugas seorang suami namun terkadang kita sendiri tidak tau bagaimana cara mendidik istri dengan merayu atau menggodanya, berikut ini anjuran menurut islam cara mendidik istri.</span></a></li>
<li class='s3sliderImage'>
<a href='http://www.kucoba.com/2009/12/5-tips-dan-rahasia-mempercepat-internet.html'>
<img height='245' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqB1lgKJqkVnMPrjXbEvwTjvIQNU8_c6INnYE_VAkjLESvRvqDYZF7Aa0HWwN4JxbPDcCTcpfjh_tJrwKQVTItROjt7HWLwnOdFVjX2ZDU7TP5OkvUX8mQzE0BRz0mKdZtuZxjQaOL6WhM/s1600/3.jpg' width='450'/>
<span>5 Tips Rahasia Mempercepat Internet. Anda merasa kecepatan internet lambat? temukan penyebabnya disini dan cari tau bagaimana solusinya.</span></a></li>
<li class='s3sliderImage'>
<a href='http://www.kucoba.com/2010/07/membuat-slideshow-berita-foto-seperti.html'>
<img height='245' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHzWjicJSe8ybqodOfaGOS5PMSD7uDxxgfqfBgxyW04cTpBfqYc63U39SX4E3YSasZ8N91KVDIjYePHP_d0j4jYwc8w2l4SBBFirXqlPvXsmQic6puGInOQ_L_EoLHaTuC4KChpMF7L22b/s1600/4.jpg' width='450'/>
<span>http://www.kucoba.com adalah sebuah blog yang didirikan untuk mendukung program pengembangan sumber daya perblogkan melalui Blogger/Blogspot.</span></a></li>
<li class='s3sliderImage'>
<a href='http://www.kucoba.com/2010/06/inilah-cara-meningkatkan-jumlah.html'>
<img height='245' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXwqCjNQ35_CA4joLRkrgZlcjCKOAao756c9gcbDNI5vLo6tKcf5Ral2QxK4ozWIVhQgHFtGsYs235FL7p5moj5-22KZzd905ETdQ1jvuRBhzxqhS184ufb1s4kH1pfgXcB0roMTJrfgA/s320/graph_summary_barchart.php+juni.png' width='450'/>
<span>Panduan mudah meningkatkan jumlah pengunjung dan dangan cara Cepat, mudah, dan gratis.</span></a></li>
<div class='clear s3sliderImage'/>
</ul>
</div>
</b:if>
Baca Ini !!
Buat Mengubah Ukuran dan Lebar Slide Show Agar Fix Sesuai ukuran yang anda inginkan :
Sesuaikan width dan heigth dengan ukuran widget yang di ingin kan sesuai dengan ruang di sidebar blog atau posisilainnya yang tersedia. untuk informasi lebih lanjut silakan lihat Keterangan di nomor tiga di atas. Dan untuk cara mengatur atau setting waktu slide show silakan anda cara kode timeOut: 3000
Ubah angka 3000 itu sesuai kemauan anda .
Previous Article
