Smooth Jquery Featured Post Slideshow For Blogger

Live Demo

1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.

2. Paste the following code in HTML/Javascript Box.

<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"/></script>
<script type="text/javascript">
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>
<script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/n17-content-slider/n17-content-slider-07.js" type="text/javascript"></script>
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<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>



<div id="s3slider">
<ul id="s3sliderContent">

<li class="s3sliderImage"><a href="#" target="_blank"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg0RN1628hyis4O0cyAdqgnFNT5GIXaDjDXhYZxxEkHusFAm1yy5fLVNhhShNV-1WUKdn5p7-9KzU3jALNkxv0yvh7Lepe1N75bXe8S6TdIv1BILvmNnECCsds9jGU45yum4Xc6DTk9K0A/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" /><span>Title-of-Post-1</span></a></li>

<li class="s3sliderImage"><a href="#" target="_blank"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzmwWUADs2OMs3K2Blq6ipqkgUZiV8RE_rFAanRzd2lCDj98yXL_GQR0ComqtBT9efgdRPynh3UdcmYwdDn93zf4bFcAzypweYsnxT5IMapQCoIWJYe7benRAyqfdCRoydGue7-ce5_Ksi/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png" /><span>Title-of-Post-2</span></a></li>

<li class="s3sliderImage"><a href="#" target="_blank"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzB01FSUJXyRm3575-wkHWlOgLHjxe3unup_iEjvbFC8rr3p-lkmwujViRUZwL43HqbRUqZ2M-eeQfK0MwMQKrf_B2afZmmyhl8POa_71fTsFdP0ITGmsn-I-nGRkO0lphiuCoUT_sq4w5/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png" /><span>Title-of-Post-3</span></a></li>

<li class="s3sliderImage"><a href="#" target="_blank"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqg563EMThR_AXuu7bISw7eIzUORCWkE3KuPW4PIhsbROgUZDuql2edpG1eUsUuqpjuHGjlmV2vSki0HisFLecgKCtAYL08V1QHNZBiqIKV97NXmkBEFDhwkY6RtZnObbWH2HxGShgjw9a/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" /><span>Title-of-Post-4</span></a></li>

<li class="s3sliderImage"><a href="#" target="_blank"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkt82SKx5_LLeH_D2XehJlRcJt_0nPu1kd3J1pCJTHV93Bwxa__1j2y8d0DChLEHp6mss2qJyr_camup9EcDag7iVofGV73hHFIATQfC8hpsOmUxVVe07LTDvGrmo8EgwOT3Uo_he3nxRr/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" /><span>Title-of-Post-5</span></a></li>

<li class="s3sliderImage"></li>
</ul>
</div>

<div class="clear"></div>
</div>