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/AVvXsEhSk0eKDK23Dob7JdvTxDlsgopNWqe8PKbbKnDD4cT0FA7GOSjcC2OUN8kI5pDIsOHo4OL_VeQmLk4cgcLdTtBL-yelZPV2khLmDHGUGdVyGxLgUWmFjzJxN4QwRpzSG48AUKXwTMpxFV-9/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/AVvXsEgqfFT5ahI7_M_7pzo6zbolKlCTHfDRsk7XbvM_vp6yqjDdWvp2FVU7vd9XGXX3xzsPPeT-TvRC2P-oZT5z6ajFLRgvCiyp9jStVbYMPdOUGW_bczsD-7DSLkUIU6wY8R3eL_dCoBtQViTy/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/AVvXsEimck_Ck-RMp8xHeeNeJAC6MXL_cILDhpRMvsz-ZjuOzx92N5iSAWRSfvSRVh3TR9xfKhJQ2OLE_MIoRkF0Go2FmvjQTmyqZJIM6akdiKjKLIazLQBvxP7-ykk-vlXFK5g9kT-qFJwIxyNH/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/AVvXsEjKubRf4kzuoj_okYSFTcIOe8X3FUk4dGYik30ukGnrQUz91gPXE3WxzTTPVaQLCKTVhMPqI3fODJkk7C3Yf9pu1DXeyOYDy3SsbG7qJezDSGkEgF1wy-VDfR5V35vDTbTl8H10ABZBYYIA/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/AVvXsEivojdBw2zh53sK4vPXTdPDjfJRW8LYl2xt0qHgsKwZtCUhYjqNwPItabK-xDasT-BC0JCPZwpfGJzlflAYC9L83mS0Zc-kO2Fg2kQnKOyJFk30d2cUakPRs9TO9O6T9KR8lPoDkH1K1nwr/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>