How To Create JQuery Featured Content Slideshow

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 src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/n17-content-slider/n17-content-slider-01.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">
ul.slideshow {
list-style:none;
width:600px;
height:240px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:600px;
height:240px;
border:none;
}
#slideshow-caption {
width:600px;
height:70px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:500;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:1000;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style>


<ul class="slideshow">

<li><a href="#" target="_blank"><img 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" title="This is featured post 1 title" alt="Replace This Text With Your Featured Post 1 Description." /></a></li>

<li><a href="#" target="_blank"><img 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" title="This is featured post 2 title" alt="Replace This Text With Your Featured Post 2 Description." /></a></li>

<li><a href="#" target="_blank"><img 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" title="This is featured post 3 title" alt="Replace This Text With Your Featured Post 3 Description." /></a></li>

<li><a href="#" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKubRf4kzuoj_okYSFTcIOe8X3FUk4dGYik30ukGnrQUz91gPXE3WxzTTPVaQLCKTVhMPqI3fODJkk7C3Yf9pu1DXeyOYDy3SsbG7qJezDSGkEgF1wy-VDfR5V35vDTbTl8H10ABZBYYIA/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" title="This is featured post 4 title" alt="Replace This Text With Your Featured Post 4 Description." /></a></li>

<li><a href="#" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivojdBw2zh53sK4vPXTdPDjfJRW8LYl2xt0qHgsKwZtCUhYjqNwPItabK-xDasT-BC0JCPZwpfGJzlflAYC9L83mS0Zc-kO2Fg2kQnKOyJFk30d2cUakPRs9TO9O6T9KR8lPoDkH1K1nwr/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" title="This is featured post 5 title" alt="Replace This Text With Your Featured Post 5 Description." /></a></li>

</ul>