How to make an automatic Recent post slider.

Automatic Recent Posts Slider With jQuery For Blogger

 

Step 1 - Applying Styles

Go to Blogger Dashboard > Design > Edit HTML. (In new User Interface It Is - Dashboard > Template)
As always download a copy of your template first.
Now find for ]]>
Add below code just before ]]>

#slide-container {
    height: 360px;
    position: relative;
    width: 480px;
}

#slider {
    height: 360px;
    left: 25px;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    width: 480px;
    font-family: calibri;
}

.slide-desc {
    background: transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;
    color: #FFFFFF;
    padding: 10px;
    position: absolute;
    right: 0px;
    text-align: left;
    top: 0;
    width: 200px;
    z-index: 99999;
}

.slide-desc h2 {
    display: block;
}

.crosscol .widget-content {
    position: relative;
}

#slider ul, #slider li,

#slider2 ul, #slider2 li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#slider2 {
    margin-top: 1em;
}

#slider li, #slider2 li {
/*

define width and height of list item (slide)

entire slider area will adjust according to the parameters provided here

*/
    width: 480px;
    height: 360px;
    overflow: hidden;
}

#prevBtn, #nextBtn,

#slider1next, #slider1prev {
    display: block;
    width: 30px;
    height: 77px;
    position: absolute;
    left: -30px;
    text-indent: -9999px;
    top: 71px;
    z-index: 1000;
}

#nextBtn, #slider1next {
    left: 520px !important;
}

#prevBtn, #nextBtn, #slider1next, #slider1prev {
    display: block;
    height: 77px;
    left: 0;
    position: absolute;
    top: 132px;
    width: 30px;
    z-index: 1000;
}

#prevBtn a, #nextBtn a,

#slider1next a, #slider1prev a {
    display: block;
    position: relative;
    width: 30px;
    height: 77px;
    background: url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;
}

#nextBtn a, #slider1next a {
    background: url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0;
}

/* numeric controls */

ol#controls {
    margin: 1em 0;
    padding: 0;
    height: 28px;
}

ol#controls li {
    margin: 0 10px 0 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 28px;
    line-height: 28px;
}

ol#controls li a {
    float: left;
    height: 28px;
    line-height: 28px;
    border: 1px solid #ccc;
    background: #DAF3F8;
    color: #555;
    padding: 0 10px;
    text-decoration: none;
}

ol#controls li.current a {
    background: #5DC9E1;
    color: #fff;
}

ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus {
    outline: none;
}

Step 2 - Adding JavaScript

Now find for tag
Add below code just after/below tag.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'&gt;</script&gt;
<script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'&gt;</script&gt;
<script type='text/javascript'&gt;
//<![CDATA[
$(document).ready(function(){
 $("#slider").easySlider({
 auto: true,
 continuous: true
 });
});
//]]gt;
</script&gt;

 Now save your template.

Adding The Gadget

Now go to Page Layout
Add a Gadget > HTML/JavaScript
Paste below piece of code and save it.

<div id="slider">
<script style="text/javascript" src="http://code.helperblogger.com/easySlider.min.js"></script&gt;
<script style="text/javascript"&gt;
 var numposts_gal = 6;
 var numchars_gal = 150;
 var random_posts = false; // random posts
</script>
<!-- replace with your web address (marked with red color) -->
<script src="http://yourblog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"&gt;</script&gt;
</div>

Note: If you need,
Replace                      

"<"  " with "<"
And                         
"&gt" with ">"

 Now replace yourblog.blogspot.com with your own blog url.[Code Line - 10] (Only change blog URL don't change any other things.
To change number of post find this var numposts_gal = 6; line in above code. (Code Line - 4)
If you want to change number of characters to show in description find this piece of code var numchars_gal = 150; (Code Line - 5)
Now save your all the changes and you are done.Visit your blog to see this beautiful slide.




Your questions,queries and feedback are always welcome.Also if you need any help about customizing this gadget then feel free to ask me.I'll glad to help you.
Good day....