Smooth Jquery Featured Images Slideshow For Blogger

In this post I will shows you how to add featured content slideshow to show your featured post to your readers. This slideshow is very easy to setup and can easily manage width and height to match your template. Not only that you can change the speed of this slideshow easily.

1. Login to your blogger Dashboard - Design - Edit HTML

2. Scroll down to where you see </head> tag .

3. Copy below code and paste it just before the </head> tag.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/* ------------------------------------------------------------------------
s3Slider
Developped By: Boban Karišik -> http://www.serie3.info/
CSS Help: Mészáros Róbert -> http://www.perspectived.com/
Version: 1.0
Copyright: Feel free to redistribute the script/modify it, as
     long as you leave my infos at the top.
-------------------------------------------------------------------------- */
(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>
<style type='text/css'>
#s3slider {
background:#000000;
border:1px solid #818e8f;
width: 550px;
height: 200px;
position: relative;
overflow: hidden;
}
#s3sliderContent {
width: 550px;
position: absolute;
top:-14px;
padding: 0px;
margin-left: 0;
}
.s3sliderImage {
float: left;
position: relative;
display: none;
}
.s3sliderImage span {
position: absolute;
left: 0;
font: 20px Trebuchet MS, sans-serif;
padding: 10px 0px;
width: 550px;
background-color: #000;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
color: #fff;
display: none;
bottom: 0;
text-align:center;
}
.clear {
clear: both;
}
</style>

NOTE : To change the speed of slideshow, change the value 4000.
4. Save your template.
5. Now go to Design - Page Elements and click on "Add a gadget".
6. Select "html/java script" and add the code given below and click save.

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid6TwfR7HPc7lSQyd_6DVgdJ8_2B0SrMblbK8oviNxdx2jE3GanGdHGhsTyrsTj3F7nfJpqzoSBmPQfzXpVgMikvjWPZJSqOF9mZlWZITyocEradNaAp5lpxZZ0rdAwGYkj5SjQqEX4Y0L/s1600/Crysis-11.jpg" />
<span>Crysis : Download Full Version</span></a>
</li>
<li class="s3sliderImage">
<a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjCtT7faTT2qRRkvopyjG1smPxCzliJyn6tQgRDrwrre3u0ajLpXkAvYb8FyPgEOLEGEeSLXdea5ig6sRGMICv5ujv7ov4jgIMcWgRNEwCLGoXuAOwqbOnAHxqv4z_PInzinLIp3pcrsvP/" />
<span>Halo 3 : Play Game Online</span></a>
</li>
<li class="s3sliderImage">
<a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge60IM6wEOYV5QTkcb7__Ab6ghOKdbbiCRNrZ7EI2NMAzX1fOo2pcm7d-dpIWK5kPrR3MAkwNf5z_PX8hwUe0SuNXw3YNw1L_w8xkIv9mhypP-jvxD91eRttQRViMM0akJpsqIAEcw64Sw/" />
<span>Avatar : Watch Movie Now !!!</span></a>
</li>
<li class="s3sliderImage">
<a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8hzxWj0-szNVHzP_-dVfDQyyeyHIV6McA716XsAp4lZLNQpLZO7IEIbHfInE1XTxEURuMFC7z7OFdv7IngpWRKSzd0s_sk344Uv3X7TBgafJAFbU0ZdodNv9lUd-ixwK-XW2_ZOZLUz0a/s1600/call+of+duty-11.jpg" />
<span>Call Of Duty 4 : Get Here</span></a>
</li>
</ul>
</div>
<div class='clear'></div>

Sumber: all-blogger-tools.blogspot.com