Using jQuery Slider Featured Posts (glory)

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://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/17-content-code/jquery.cycle.all-000-.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//]]>
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#myslides').cycle({
fx: 'fade',
speed: 700,
timeout: 3000,
next: '#next',
prev: '#prev'
});
});
</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">
/* featured fade */
#wrapper-featured{
padding:10px 0 ;
width:650px;
height: 326px;
margin:0 ;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9yV9_33GA2Ux4TiARv2PNzMiuy5RCy3CUJABupeqvpZ2q-YkDFqO0jJSRpDioo0AOj5lx-wje2mdHAzn8fpTjGsaE_yJFP0sHYO-RhNS22B92y4NJ1NEY9oWIa4BEBHy6MGbrLjzv0hAW/s1600/bg_featured.jpg) no-repeat;
position:relative;
}
#wrapper-myslides {
width:550px;
height:210px;
padding: 0 0 ;
margin: 3px 0 0 10px;
position:relative;
float:left;
}
#myslides {
width:550px;
height:210px;
padding: 0 0 50px;
margin: 0 18px ;
overflow:hidden;
}
.panel{
width:550px;
height:210px;
}
#myslides img.crop-foto {
margin:8px 10px 10px 9px;
border:1px solid #fff;
display:block;
position:absolute;
right:3px;
top:0;
}
.featured-entry {
text-align:left;
line-height:1.5em;
font-style:italic;
font-size:12px;
font-family: georgia,Arial,Verdana, Helvetica, sans-serif;
padding: 20px 10px 0;
width:280px;
color:#fff;
position:absolute;
top:0;
left:0;
}
h3.featured-title {
font-size:22px;
text-align:left;
font-family:Georgia, Arial,Verdana, Helvetica, sans-serif;
margin:10px 0 5px;
padding:0 0 5px;
font-weight:normal;
line-height:1em;
font-style:normal;
}
h3.featured-title a:link, h3.featured-title a:visited{
color:#fff;
}
h3.featured-title a:hover {
color:#b1e1ff;
}
#nav-slides a#prev {
position:absolute;
bottom:105px;
left:135px;
z-index:1;
color:#800;
width:14px;
height:15px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPnoT22mAJ7BsrGcmbeb5jmLnGRrx_Fx-_oNKCEOybanCHBvd2kJki4lxItBzTV_88EIvNEeh4NMLYtq760qKswXFBS_XBgueXawOoC2B-S_XWKx2N2EY46Tv-Kkk-18mVmlTzYeEs5I4O/s400/prev.jpg) no-repeat;
}
#nav-slides a#prev:hover{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWEXaDhvalNiR4W6Zg_NDl8BripsO4z0eSv1jrEBVXaWvZOCFLzY8Y0nHuFbFuV8v2G6OL9VFYJjUgTU9_bhreWIzgZK60S8_sVW03_gXixqf492ZcaKqJ1ljVv4PEquA1dMHRhcucMaSQ/s400/prev_hover.jpg) no-repeat;
}
#nav-slides a#next {
position:absolute;
bottom:105px;
left:160px;
z-index:1;
color:#800;
width:14px;
height:15px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcPQ4UzsXJ3oGmbFtiTuHkePJGvp7XtcymZsXwZ5zfu-UVeLwpPgyaw4gH-IylFPoK8Gm5NAEOeMRAH5Ubq42_DVZ6phvCqlLhOZPSihccvDkRkQ0e0U4noEdA1-8ZsWdxZz7Oz9ZkMcDi/s400/next.jpg) no-repeat;
}
#nav-slides a#next:hover{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjoL8NOVGPrR4IvbuNLSnfLEwFZMLVmZTdcOKVawaBJD-crK0r7E5CWesvEESJqjLqt6Ungx5TfADO4US4dwRMdK7sUuFAO8qmKR4Hb72Wr4aI72ya0wwz5Vx24ua9isZc8ipzP82l3bn6/s400/next_hover.jpg) no-repeat;
}
</style>


<div id="wrapper-featured">
<div id="wrapper-myslides">
<div id="myslides">
<div class="panel">
<div class="image-frame">
<a href="#" target="_blank" rel="bookmark" title="Title-of-Post">
<img alt="" class="crop-foto" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP71aXM_6QBiBIUV_3BinWxuUOujo7wkscxYziKiK8grh7e153qqeAMoncnHfTzV1adgpxMQ015ADWH686V3kr5MvQxKa55012DzWYorW3tuPiGJWug_-O1cSkuth1zOOMUUBqbsmgTXM1/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" width="205"/></a>
</div>
<div class="featured-entry">
<h3 class="featured-title">
<a href="#" target="_blank" rel="bookmark" title="Title-of-Post">Title-of-Post</a></h3>
<p>Slide 1 Description [...]</p>
</div><!--end featured-entry-->
</div><!--end panel-->
<div class="panel">
<div class="image-frame">
<a href="#" target="_blank" rel="bookmark" title="Title-of-Post">
<img alt="" class="crop-foto" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQEdNaiz60uZ1WFkC-DCWhkGycQnGo8u-9fTje30F6flOrGQd6bAP_6n7z8WIYSn_59DhGjnxnfdo5Te4ob9tV8-Ser4Rrt1RwtNq-x6tJZESXDzCE5ROjNO_JChag4eT7JxDeI2rbkIbg/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png" width="205"/></a>
</div>
<div class="featured-entry">
<h3 class="featured-title">
<a href="#" target="_blank" rel="bookmark" title="Title-of-Post">Title-of-Post</a></h3>
<p>Slide 2 Description [...]</p>
</div><!--end featured-entry-->
</div><!--end panel-->
<div class="panel">
<div class="image-frame">
<a href="#" target="_blank" rel="bookmark" title="Title-of-Post">
<img alt="" class="crop-foto" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmJyR41x2oovL6SukZX8JoUfG-44VPRieuTaPQ1-zExoCSMSgYnChlxeQ5lEcCab5JS3uMpUJJuky6I1OkqcvbRjjJ1qeIgbOl7PZUjSPOiB-Usw11NBOsrVXBwMsRZDUMogVZwk0JGt_a/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png" width="205"/></a>
</div>
<div class="featured-entry">
<h3 class="featured-title">
<a href="#" target="_blank" rel="bookmark" title="Title-of-Post">Title-of-Post</a></h3>
<p>Slide 3 Description [...]</p>
</div><!--end featured-entry-->
</div><!--end panel-->
<div class="panel">
<div class="image-frame">
<a href="#" target="_blank" rel="bookmark" title="Title-of-Post">
<img alt="" class="crop-foto" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiinEdT5W_1cyCU7aNMCw0We7dl6XWxpKIPk68v2Id7wbDOGU1fGIlXl9KFNRPAOCsnkm5VSY0vFfllD5fTNKSJD_NH3FKJCTrbE-gV4MNp6GkQGvg_yU2SuWdUtM0OI5fKfNK4gCm_ABBC/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" width="205"/></a>
</div>
<div class="featured-entry">
<h3 class="featured-title">
<a href="#" target="_blank" rel="bookmark" title="Title-of-Post">Title-of-Post</a></h3>
<p>Slide 4 Description [...]</p>

</div><!--end featured-entry-->
</div><!--end panel-->
<div class="panel">
<div class="image-frame">
<a href="#" target="_blank" rel="bookmark" title="Title-of-Post">
<img alt="" class="crop-foto" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGsTs-0HojlBKg3DnQ8L8zK0L-kgLE-6mSNKH9sn473c108qKRRr3C7DIIBhkObrHvOxZNtC9nveLJxID7gbA9mHNsFdiRdNGwZ8VsmtsHT768kzib9IKAsOhO0W1q-EBChFINzbE7U6xz/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" width="205"/></a>
</div>
<div class="featured-entry">
<h3 class="featured-title">
<a href="#" target="_blank" rel="bookmark" title="Title-of-Post">Title-of-Post</a></h3>
<p>Slide 5 Description [...]</p>
</div><!--end featured-entry-->
</div><!--end panel-->
</div><!--end myslides-->
</div><!--end wrapper-myslides-->
<div id="nav-slides">
<a href="#" id="prev"></a>
<a href="#" id="next"></a>
</div>
</div><!-- wrapper featured-->