Smooth Jquery Featured Post Slideshow For Blogger

This tutorial 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.Default width is 550px and Default height is 200px.I think you will love this slideshow.You can see the DEMO of this widget from here.



1.Login to your blogger dashboard--> layout- -> 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 Layout-->Page Element 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/AVvXsEjqXPI9K6A7Xmz-RDQK5u4X3CDKH0AI71MVZ62jkgq3XGZY9q9un-r7RZK2GjsW-nsjvGzymUb4ZgP8uv8NZ18Vd6uj_CGWYtICSktVsvr0ZW6X8ETN9TDTHTSZcinQWHe1XvTTyniSGa3T/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/AVvXsEg92pLOJCsf-Qddj9Ug0hGCTwVoLujISupC8j-lwlNILWNmOEWspsB2PQfHDvuRm5GczhN6lg5MRMtDB7Z41QfowiS79m_cwKvHfzptloWbZDqDdZ7kKPUkyb3WTd_zt_kMCwy6-DjgREaE/" />
<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/AVvXsEiwfwIlI2pSfsi4gZLOj0qrYSl6i3Y-adZbYKANp1JIa13Mk5TQZ_51bMaaJTNNGuinPaQ_V71fapfl6DQiiCUp_lIt1Ze3VhDAVDy4JBrOy4x6Btkm3NBzERy-7gMy956vaUgHKunhDbbk/" />
<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/AVvXsEiYroO7rLhi-P9BKqDfuukOYKMOl5FFC1oDikmBqiL8UsepC44fqaYl8DGSYZTfMTOgd07A_Bwgge2f4805YKaAoaVImHs-Ae1Ep_SWR2bDuXwGxtdcM8vnf_NOBIvuCDaQaKb89pQrHZpX/s1600/call+of+duty-11.jpg" />
<span>Call Of Duty 4 : Get Here</span></a>
</li>

</ul>
</div>

<div class='clear'></div>

NOTE : Replace YOUR-LINK-HERE and images with your content.

Now you have successfully installed this slide show to your site.