Kali ini saya akan membahas tentang cara memasang slide show pada blog.Yang akan berguna untuk memperindah blog kalian dengan slide gambar beserta deskripsinya.Berikut tutornya:

1. Masuk ke Edit HTML.
2. Jangan klik Expand Template Widget karena akan membuat sobat jadi pusing dengan kode yang panjang.
3. Copas kode berikut diatas kode ]]></b:skin>
   
   /* SLIDESHOW */
   #slider-holder{width:540px;height:300px;overflow:hidden;margin-left:-15px;padding:0}
   #s3slider{width:540px;height:300px;position:relative;overflow:hidden}
   #s3sliderContent{width:540px;position:absolute;top:0;margin-left:0}
   .s3sliderImage{float:left;position:relative;display:none}
   .s3sliderImage span{position:absolute;left:0;font-weight:700;font-size:12px;color:#fff;height:70px;width:540px;background-color:#4e4d3c;filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity:0.7;opacity:0.7;display:none;bottom:0;padding:10px}
   .s3sliderImage span a.featured-title:link,.s3sliderImage span a.featured-title:visited{color:#FFF;font-size:14px;padding:0 0 2px}
   .s3sliderImage span a.featured-title:hover{color:#999}
   .s3sliderImage span a:link,.s3sliderImage span a:visited{color:#888}
   .s3sliderImage span a:hover{color:#555}
   
4. Kemudian copas kode berikut diatas kode </head>
   
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>
   <script type='text/javascript'>
   <!--//--><![CDATA[//><!--
   (function($){ 
       $.fn.s3Slider = function(vars) {      
           var element     = this;
           var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
           var current     = null;
           var timeOutFn   = null;
           var faderStat   = true;
           var mOver       = false;
           var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
           var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
           items.each(function(i) {
               $(items[i]).mouseover(function() {
                  mOver = true;
               });
               $(items[i]).mouseout(function() {
                   mOver   = false;
                   fadeElement(true);
               });
           });
           var fadeElement = function(isMouseOut) {
               var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
               thisTimeOut = (faderStat) ? 10 : thisTimeOut;
               if(items.length > 0) {
                   timeOutFn = setTimeout(makeSlider, thisTimeOut);
               } else {
                   console.log("Poof..");
               }
           }
           var makeSlider = function() {
               current = (current != null) ? current : items[(items.length-1)];
               var currNo      = jQuery.inArray(current, items) + 1
               currNo = (currNo == items.length) ? 0 : (currNo - 1);
               var newMargin   = $(element).width() * currNo;
               if(faderStat == true) {
                   if(!mOver) {
                       $(items[currNo]).fadeIn((timeOut/6), function() {
                           if($(itemsSpan[currNo]).css('bottom') == 0) {
                               $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                                   faderStat = false;
                                   current = items[currNo];
                                   if(!mOver) {
                                       fadeElement(false);
                                   }
                               });
                           } else {
                               $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                                   faderStat = false;
                                   current = items[currNo];
                                   if(!mOver) {
                                       fadeElement(false);
                                   }
                               });
                           }
                       });
                   }
               } else {
                   if(!mOver) {
                       if($(itemsSpan[currNo]).css('bottom') == 0) {
                           $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                               $(items[currNo]).fadeOut((timeOut/6), function() {
                                   faderStat = true;
                                   current = items[(currNo+1)];
                                   if(!mOver) {
                                       fadeElement(false);
                                   }
                               });
                           });
                       } else {
                           $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                           $(items[currNo]).fadeOut((timeOut/6), function() {
                                   faderStat = true;
                                   current = items[(currNo+1)];
                                   if(!mOver) {
                                       fadeElement(false);
                                   }
                               });
                           });
                       }
                   }
               }
           }
           makeSlider();
       }; 
   })(jQuery); 
   //--><!]]></script>
   <script type='text/javascript'>
   $(document).ready(function() {
   $(&#39;#s3slider&#39;).s3Slider({
   timeOut: 4000
   });
   });
   </script>
   
5. Setelah itu siapkan gambar dan url yang akan ditampilkan dalam menu slideshow, jika sudah ada gambar dan url-nya, silahkan sobat copas kode berikut setelah kode <div id='main-wrapper'>
   
   <div id='slider-holder'>
   <div id='s3slider'>
   <ul id='s3sliderContent'>
   
   <li class='s3sliderImage' style='display: list-item;'>
   <a href='LETAK LINK DISINI 1'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMYZDAMuEOO8deIfOhstPasm8epNy0Ab67ybZ9Jl1hrUswuQJABnCRM82Ed2Qrul-d-XAwLbLVBsUnFUA2r7_VReFhgxNZC-RO6Vhb5AKAVjBb88NsgvGRlTZxFvlGIDPvFPav6gBsyA/s1600/2.jpg' style='width: 540px; height: 300px;'/></a>
   <span style='display: block;'>
   <a class='featured-title block' href='LETAK LINK DISINI 1'>JUDUL POST 1</a><br/>
   Isi diskripsi tentang gambar diatas
   </span>
   </li>
   
   <li class='s3sliderImage' style='display: none;'>
   <a href='LETAK LINK DISINI 2'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoUc3v1po16u2JSbhuIO8-3c57P3sC8PkMYR_DeZel4wWQ8tsyjAennTYKH_7xJPqXGen0P0kaEy4Kg__6jbIUo7_dgdrVzPmphBM9jVjHyvSvuUIhBLd2CKa4d6lP8dlDwKpUpR2uIQ/s1600/4.jpg' style='width: 540px; height: 300px;'/></a>
   <span style='display: none;'>
   <a class='featured-title block' href='LETAK LINK DISINI 2'>JUDUL POST 2</a><br/>
   Isi diskripsi tentang gambar diatas
   </span>
   </li>
   
   <li class='s3sliderImage' style='display: none;'>
   <a href='LETAK LINK DISINI 3'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB8zLK8Wze9PV3joAcb93sXbG35dGn64UobU48W_k8Y7462mprMRExI0PR_xB_LQoGlfHwOyl1r5ElaBcTjkOqsuI4MgWRvyOQfiFswQtCNjHocGAy9JLqsCoGGdUL357WF_tEhtnHLak/s1600/2.jpg' style='width: 540px; height: 300px;'/></a>
   <span style='display: none;'>
   <a class='featured-title block' href='LETAK LINK DISINI 3'>JUDUL POST 3</a><br/>
   Isi diskripsi tentang gambar diatas </span>
   </li>
   
   <li class='s3sliderImage' style='display: none;'>
   <a href='LETAK LINK DISINI 4'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeQQ_RJgpM_-6391ESJmWaDeE5t980JZs_CZ2_sLj0KdkBbLTcFGY-qGv9BJKr9nszsRwjgVYtw2jv79Qhv8ufjIFkYPHpBYOliIJk_d3gDe2VSLOI9TjDsVASr59NLyLeinys0GjeEUI/s1600/3.jpg' style='width: 540px; height: 300px;'/></a>
   <span style='display: none;'>
   <a class='featured-title block' href='LETAK LINK DISINI 4'>JUDUL POST 4</a><br/>
   Isi diskripsi tentang gambar diatas
   </span>
   </li>
   
   <li class='s3sliderImage' style='display: none;'>
   <a href='LETAK LINK DISINI 5'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiixpQxasmoBKURNZO3CZf-raqBqI5hBHR09pQdtA-sJWNJuUJj9kPDfzPj1jFRN0W6OvIbwBohZSZZHi99ZniXMTNZ28GHuo7Wc6qeRNOYWoR-ieHZUL3AJbx6FEEdjDOPQHdod8QVTnI/s1600/4.jpg' style='width: 540px; height: 300px;'/></a>
   <span style='display: none;'>
   <a class='featured-title block' href='LETAK LINK DISINI 5'>JUDUL POST 5</a><br/>
   Isi diskripsi tentang gambar diatas </span>
   </li>
   
   <li class='clear s3sliderImage'/>
   </ul>
   </div>
   </div>
   
6. Simpan Template

• Perhatikan lebar 540px, silahkan sesuaikan saja dengan lebar post template sobat.
• Lihat tulisan yang berwarna ungu pada kode css-nya, saya gunakan margin-left:-15px karena menyesuaikan dengan demo template yang saya gunakan.
• Kode yang berwarna pink adalah kode url untuk gambar yang sudah sobat upload sebelumnya.
• dan kode dengan tulisan tebal pastinya bisa dimengerti dan jelas saya tulis disitu