Cara Membuat Slide Show Berita Seperti Detik Versi 2

Langsung Aja kita simak Cara Membuat Slide show Berita foto Seperti Detik versi 2 ini.

Langkah 1

1.  Login ke Blogger

2.  Pilih Tata Letak / Rancangan

3.  Pilih Tab Edit HTML

4.  Centang " Expand Template Widget"

5.  Silakan Cari Kode ]]></b:skin> dan Taruh Kode Berikut Di atas kode ]]></b:skin>

/* Image Slideshow */ #s3slider{margin-bottom:5px; width:100%; /* important to be same as image width */height:250px; /* important to be same as image height */position:relative; /* important */word-wrap:break-word; /* fix for long text breaking sidebar float in IE */overflow:hidden; /* fix for long non-text content breaking IE sidebar float */} #s3sliderContent{width:100%; /* important to be same as image width or wider */position:absolute; /* important */top:0; /* important */margin:0px; padding-left:0px; /* important */} .s3sliderImage{float:left; /* important */position:relative; /* important */display:none; /* important */} .s3sliderImage span{position:absolute; /* important */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); /* here you can set the opacity of box with text */-moz-opacity:0.7; /* here you can set the opacity of box with text */-khtml-opacity:0.7; /* here you can set the opacity of box with text */opacity:0.7; /* here you can set the opacity of box with text */color:#fff; display:none; /* important */top:0; /*if you puttop:0; ->the box with text will be shown at the top of the i

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'/> <script type='text/javascript'> //<![CDATA[ var cssdropdown={disappeardelay:250,dropdownindicator:'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcMEDS6zAcJXWb_cW1TVWjJfc_BQauzAkcUM7LUsmqy7xClTbT02t47_VuEZ2UcfOShiRyeWaPGgmU1vTTQF-VaMlfQkUw6nKqJ4tEbsp5-Cz-SO6BBpacMuPw3SChjBdxWD2JmzkWHPA/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.  Save Template

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 != &quot;item&quot;'>

<div id='s3slider'>

<ul id='s3sliderContent'>

<li class='s3sliderImage'>

<a href='http://asksalman19.blogspot.com/2010/07/10-tanda-cewek-suka-ma-kita.html'>

<img height='245'
src='http://3.bp.blogspot.com/_Z8F7gBEfQSU
/S_3BHzSwjQI/AAAAAAAAA4Y/ckLzjBVMJmw/s1600/1.jpg'
width='450'/>

<span>Isi dengan kalimat yang 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 kalimat yang ingin anda di tampilkan mendampingi foto/image.</span></a></li>

<li class='s3sliderImage'>

<a href='#'>

<img height='245'
src='#'
width='450'/>

<span>Isi dengan kalimat yang ingin anda di tampilkan mendampingi foto/image.</span></a></li>

<li class='s3sliderImage'>

<a href='#'>

<img height='245'
src='#'
width='450'/>

<span>Isi dengan kalimat yang ingin anda di tampilkan mendampingi foto/image.</span></a></li>

<li class='s3sliderImage'>

<a href='#'>

<img height='245'
src='#'
width='450'/>

<span>Isi dengan kalimat yang ingin anda di tampilkan mendampingi foto/image.</span></a></li>

<div class='clear s3sliderImage'/>

</ul>

</div>

</b:if> 

Keterangan :

1. Ganti warna merah dengan alamat link artikel kamu
2. Ganti warna hijau dengan link gambar / foto
3. Arti kode width="468" height="245" adalah ukuran dari widget slideshow view, lebar="468" tinggi="245" (atur sesuai ukuran widget yang kamu inginkan)
4. <span>Isi dengan kalimat yang ingin di tampilkan di atas foto.</span>
5. Jumlah Slide Show bisa anda perbanyak dengan menambahkan kode <li><a href="#"><img height='245' src="#" width='468'/> <span>isi dengan kalimat yang 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 di bawah ini :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage'>
<a href='http://asksalman19.blogspot.com/ 

2010/07/10-tanda-cewek-suka-ma-kita.html'>

<img height='245'
src='http://3.bp.blogspot.com/ 

_Z8F7gBEfQSU/S_3BHzSwjQI/AAAAAAAAA4Y/ckLzjBVMJmw/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://asksalman19.blogspot.com/2010/07/8-pedomoan-merayu-istri.html'>

<img height='245'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4mS6LXnGS5E1CcTC7G9cRjpFXhT-YSR3Ti8kmmYDGgdNCowo5k0NF424sZYueW3LVVdkdyEqdxtb2Sv1nESKBU5A2Zs8w6PeU906sb19UQU3tB2W_-6fsd8Nbe9G91PaJyr58gplpMb2K/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://asksalman19.blogspot.com/2009/12/5-tips-dan-rahasia-mempercepat-internet.html'>

<img height='245'
src='http://1.bp.blogspot.com/ 

_Z8F7gBEfQSU/S_3BITM49PI/AAAAAAAAA4o/kbvZMUdK1zk/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://asksalman19.blogspot.com/2010/07/membuat-slideshow-berita-foto-seperti.html'>

<img height='245'
src='http://3.bp.blogspot.com 

/_Z8F7gBEfQSU/S_3BIQlG3sI/AAAAAAAAA4w/ovJjGjaCUCE/s1600/4.jpg'
width='450'/>
<span>asksalman19.blogspot.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://asksalman19.blogspot.com/2010/06/inilah-cara-meningkatkan-jumlah.html'>

<img height='245'
src='http://2.bp.blogspot.com _j4kWN5RD0kU/TEJLpcR4RPI/AAAAAAAAA3M/UAmrYeGzRao/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>

Hasil contoh di atas akan terlihat seperti di halaman Blog disto yang baru di buat, Silakan Klik Disini  

PENTING !! :

Untuk 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 posisi lainnya 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 kebutuhan anda.Selamat mencoba...^_^)