Cara Membuat Slide Show View Image/Foto Seperti DETIK.

Cara Membuat Slide Show View Image/Foto Seperti DETIK.

Sebelumnya Saya berterimakasih kepada Kang Salaman  Karna saya mencoba mempraktekkan di blog saya ternyata sukses, dan ingin pula mengembangkan untuk materi blogger diblog saya. Dapat dari beliau…lansung saja.ntar kalau cerita abis pula kopi saya ikuti langkah-langkah dibawah 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="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>

7.  Save Template

Langkah Ke  2

Selanjutnya Untuk Bisa Menikmati widget ini silakan perhatikan langkah  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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBLUFTLWTht_1F3E2wxyTIwuMnUI5aHPsS7Vptp8E-cf2pM6EXZuKbLH1OVgVVCPUMCZPAiQgalXMEWVs_1UXW_Omd9dtRa6Lwf3QlzIhjUe0_BkbIs8aj66H52FHO6DWhFop_tBPppkkE/s1600/1.jpg'

width='450'/>

<span>Isi dengan kalimat yang ingin anda di tampilkan  

 titik.</span></a></li>

<li class='s3sliderImage'>

<a href='#'>

<img height='245'

src='#'

width='450'/>

<span>Isi dengan kalimat yang ingin anda di tampilkan  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  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  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>

Atau Coba Contoh Yang saya Buat Dibawah ini

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div id='s3slider'>

<ul id='s3sliderContent'>

<li class='s3sliderImage'>

<a href='http://www.yatnothezigana.co.cc/'>

<img height='230' src='http://belajarbelajar.webs.com/photos/senjata-senjata-tradi/alat%20musik%20tradisional%20sumbar%20-%20talempong.JPG' width='460'/>

<span>Salah Satu jenis-jenis Alat Musik Pukul Melodi  Tradisional indonesia MinangKabau</span></a></li>

<li class='s3sliderImage'>

<a href='http://www.yatnothezigana.co.cc/'>

<img height='230' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj25zTK-Z81qj0y0IpyF_KslDIkfiWQMNnKntpPISTCKdQICEaE6PLGWVITNUHwG0fBXlU4Sid8JrT03n5ljcUUQCtXW9dbgGNk7DFlGxWWazBcRZz9BN1V7XznnpvCqAjZxAcwiKMt4DyX/s1600/cungkik.jpeg' width='460'/>

<span>Salah Satu jenis-jenis Alat Musik Tiup Tradisional indonesia</span></a></li>

<li class='s3sliderImage'>

<a href='http://www.yatnothezigana.co.cc/'>

<img height='230' src='http://blontankpoer.blogsome.com/images/dag_dig_dug_2jun05_073.jpg' width='460'/>

<span>Dag dig dug yang naskahnya dibuat oleh Putu Wijaya digarap dengan bagus oleh Teater Gidag-gidig, Solo dan dipertunjukkan di Teater Arena, Taman Budaya Surakarta, 2 Juni 2005. .</span></a></li>

<li class='s3sliderImage'>

<a href='http://www.yatnothezigana.co.cc/'>

<img height='230' src='http://blontankpoer.blogsome.com/images/waktu_batu_3_001_2728sep04.jpg' width='460'/>

<span>Wktu Batu Teater Garasi, Yogyakarta boleh disebut sebagai kelompok teater yang paling berpengaruh di Indonesia pada kurun 2000-an. Bukan sekadar tingkat pencapaian artistik semata yang menjadikan karya-karya Garasi mengundang decak kagum para publik seni Indonesia dan mancanegara</span></a></li>

<li class='s3sliderImage'>

<a href='http://www.yatnothezigana.co.cc/'>

<img height='230' src='http://athoel.files.wordpress.com/2008/11/teater.jpg' width='460'/>

<span>Perkembangan teater di Indonesia menunjukkan kaitan dengan upacara adat dan keagamaan-tradisional, yaitu menonjolkan unsur utama yang berupa cerita, pelaku, dan penonton.</span></a></li>

<div class='clear s3sliderImage'/>

</ul>

</div>

</b:if>

Keterangan : http://www.yatnothezigana.co.cc

Url Yang warna Biru diatas ganti dengan Url Link Berita anda

Simpan Dan lihat hasil …..