Pasang Slide Show

Berikut adalah langkah-langkah untuk membuat slide show :

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/AVvXsEiMOkIgDAMjHaLPGGI3S2JocMXl7_q4baDPbmgbVpxFQmrUl0CzbAECguUPx5YxZJzP18Ont7RV268qqOKytO7del0Cojjz24O3BP2rVnXVTRbGO9Zbze0ItNRhUAEbBg-rCagA-qJ-Xw/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/AVvXsEif3ttR2J56uC6Mo_AbpDj_GjPAQOU2THngNn-DntJZQeS9AGUSpqJkDJRRiuBL7wTHuIPKLkpiRSZmosdDG816XW1yQS8D7lkDz34ro91hsiXa1BLkeJMp_BuBaj-5T0tM3HPhXA91Ag/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/AVvXsEiYETFVVjC83u-JNkqZlyd7K69DlLLMksyuuWOIxbSfnirDOZLbDj23vXGJz43FKZtJBX-SJX8Z4_ajSJBuFVI2ZMJQQO0MubjGJV0c_B89GBNuuDZvy6vgjbsVVGgMlGLQegpBcuG1hpM/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/AVvXsEhj5_atqJsSDwrukQg5ZdCJckVvjMrL7ujMh5quWleZOk4KLCb9_QvQ1tLr1S2MdIS5b-FXdZjrxuk6Act3vpdLsOMi5xYWINtLkZeS2EtN77sNauqeb7IOIl4jVE9GahcEQWdmQye4omg/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/AVvXsEh4rJZn9wU65De9xcq0Q2ZpiMEjLNVOXoBSCU5rCEn35iM1AtfckNyrBiAzdlMxyKu4_bwJ0C4PcqhvzCi1rJIu71UgTUnGlWory4nB251OxigdUcCx8tLHT3F6KyVXMjmsXRYixD0Voww/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

Semoga tutorial ini membantu sobat supaya blognya lebih bagus lagi, bila masih menemui kendala silahkan tinggalkan komentar

Dari berbagai Sumber