Cara memasang slide show

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/AVvXsEgs4wn87D-PgaAmPlcP0JKguh76iHu9IzQ0XIPZHEiZnV1J6dfH879yFuUoHroIGepBLuHEEWThvKcu0CJe7PcYA9Ja-CWL_rB-22tKTzsUiyeQV6ZN7xLelKAM1Av0SL6JIa7et7uYsA/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/AVvXsEgyLscn5FHquL0Jm-n2yBHpDbUHbYyK0b8A_NKKAYyzkWOYQY3rYP6yhRV-iVHjbAEGt83o8G0iIjlp0GCHFoulyNpSR-Wpei7Mdw9ghd_NhhIVJrzqSTc7x1U_iv8vo9dAw5dCOGZ6uA/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/AVvXsEjFUYWyp7BSmED9yyPhX5ZW1LDV7ZxdgzD-k4adQNWunXr_mxluBfziLBUuuManJrYr0qsQ-YH1BLw35tc8mzDhUJWrgFdwvX9lwt5F6Qbg_dsyoc0bKyVWmTVRyrJkhOaYbsXTL4pRbik/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/AVvXsEj31Y0S8RP2TMNX56hHYVlF49Gq4yTLftVCvnCE_t3k_AZkE9mKVpx_AGy21dBTxX2Mc9azmnBWpNmM9ZGFiDJ7UghkUTeRB51-CwP4iafMq1zxyXozOVHJe-CLKadHZJ9kPBIu65UH7P0/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/AVvXsEhZ1Qn4ijPF1ZZYtu2PkFHUVQsFKJx92y-KvaimYd-HlAzpoy42UqnrnojYhZXc4qz92DssSgQMSIc6d7vvMmbM0nhkdzEEnl1P2tcB9nDQkWXbblXCLC73qtJLG_7T0DWiS-5czjQI4V4/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

Keterangan :

• 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

sumber:http://miscah.blogspot.com/2010/11/cara-pasang-slidshow-di-blog.html