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/AVvXsEjg0RN1628hyis4O0cyAdqgnFNT5GIXaDjDXhYZxxEkHusFAm1yy5fLVNhhShNV-1WUKdn5p7-9KzU3jALNkxv0yvh7Lepe1N75bXe8S6TdIv1BILvmNnECCsds9jGU45yum4Xc6DTk9K0A/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/AVvXsEjzmwWUADs2OMs3K2Blq6ipqkgUZiV8RE_rFAanRzd2lCDj98yXL_GQR0ComqtBT9efgdRPynh3UdcmYwdDn93zf4bFcAzypweYsnxT5IMapQCoIWJYe7benRAyqfdCRoydGue7-ce5_Ksi/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/AVvXsEjzB01FSUJXyRm3575-wkHWlOgLHjxe3unup_iEjvbFC8rr3p-lkmwujViRUZwL43HqbRUqZ2M-eeQfK0MwMQKrf_B2afZmmyhl8POa_71fTsFdP0ITGmsn-I-nGRkO0lphiuCoUT_sq4w5/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/AVvXsEhqg563EMThR_AXuu7bISw7eIzUORCWkE3KuPW4PIhsbROgUZDuql2edpG1eUsUuqpjuHGjlmV2vSki0HisFLecgKCtAYL08V1QHNZBiqIKV97NXmkBEFDhwkY6RtZnObbWH2HxGShgjw9a/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/AVvXsEhkt82SKx5_LLeH_D2XehJlRcJt_0nPu1kd3J1pCJTHV93Bwxa__1j2y8d0DChLEHp6mss2qJyr_camup9EcDag7iVofGV73hHFIATQfC8hpsOmUxVVe07LTDvGrmo8EgwOT3Uo_he3nxRr/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>