Cara Pasang Slidshow di Blog

Kali ini saya akan berikan tutorial cara pasang slidshow di blog. Saya mengambil kode yang paling sederhana dengan menu slidshow yang juga sangat sederhana. Slidshow sendiri fungsinya sebagai navigasi link yang biasanya diletakkan dibawah header, dan selalu menampilkan gambar sebagai pemanis agar pengunjung tertarik untuk mengklik isi yang dimaksud. Untuk demo saya gunakan template gris-amarillo dan meletakkannya di dalam main post, silahkan cek disini.

 

Kode css yang akan saya berikan tidak mutlak harus sama, karena setiap template pasti berbeda terutama dalam tutorial ini adalah lebar kolom postingan. Untuk demo saya gunakan template yang lebar postingannya kurang lebih 540px. Buat sobat yang memiliki lebar kolom post lebih atau kurang dari 540px silahkan disesuaikan saja.

 

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/AVvXsEjb3cqWPKAO4xL0KJi7tSNXgs0PfpD5Mi4E8Rw2b3k8VZTYI8gJy8_X__1_PCbN4r-LL9s-x_aiMF60Pd3FTNGJSwqz_UW2vDJIo3HhN-eeDhwaRfkiizvXC3wQPIFyq1z58LJ2saHDww/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/AVvXsEj5WYZd1ZsJRc1KcZbHYOsqYhpaPRk_WKCrRtqmn5El-d9Bzpn4s85bucXz_S8cxqx9EB1WK8mKg0nQnbhulIEec3IdYjObHPGXbpSSvW9zMru-354zS7ZW5ZBDk01wEkd06l44p993fQ/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/AVvXsEh2mKmV1uw_3VtHl-goEup8ysH37TY1LyU4jIZqlU42sBIVbtBaNpDTicj2CbsgzsDV2rAFbNz-2L1KD5RF9TybVtkN40haIxQHCA38b7fBlLozwdpZcPITMa2fsN_4oVlu2Jyuy86z8ME/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/AVvXsEjrCuxX6YiUIdn6UUdQFrlI3MVYNfiDKDqb-w7u5bdlyH1jG2nD4uLUeHgx5Uy5wW-cxpfcXvWExqxD-uLTvK_YajWVWEPNE8cAwBwJp9_6hert6f9nxVJw-tBADD8Xb1yZbxbT-uoHAyk/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/AVvXsEhO_4newrafOpY2RdAMonubeS36a4FoQr_G8fK64H8paN8ICKyQZyW1ti8kulRJzbJqDDk7_ypRzsTWQaHtdpwrePuY9Jz4IYXUu-6TY4dkFkQyPQQIiZjQ0ylZfDdj1KQwI-4CWuko6GU/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.

 

Cukup panjang, semoga berhasil ya !