Awesome jquery featured recent post slider

Pin It Now!

Recent post widget is a very important widget now for your bloggs as it provide your visitor to show recent updates to your blogg but here we are giving this widget as a slider which is featured with jquery.you dont have to edit any text and put any image link to this slider all is automatic you have to only place your blogg address at one place
.if you want you can edit the frame width according to your blogg

View Demo

STEPS

1.Adding style of gadget

2.adding javascript

3.Adding gadget

Step 1--Adding style 

 1.Go to blogger Dashboad>Templet>Edit HTML 

 2.Find the code ]]></b:skin>

 3.Paste the given below code above ]]></b:skin>(For customizations go below and read customization)

/* START EasySlider  */
#slide-container {
height:200px;
position:relative;
width:350px;
}
#slider {
height:200px;
left:25px;
overflow-x:hidden;
overflow-y:hidden;
position:relative;
width:350px;
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:120px;
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:350px;
height:200px;
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:370px !important;
}
#prevBtn, #nextBtn, #slider1next, #slider1prev {
display:block;
height:77px;
left:0;
position:absolute;
top:70px;
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;}
/* END EasySlider  */

Step 2--Adding Javascript

1.Now find </body>

2.Paste the below given code above </body>

<!-- Start easy content slider by way2bloggerz -->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>

<script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'></script>

<script type='text/javascript'>
//<![CDATA[

ready(function(){
 $("#slider
$(document)
.").easySlider({
 auto: true,


continuous: true
 });
});
//]]>
</script>

->

<!-- End easy content slider way2bloggerz 
-

Step 3--Adding Gadget

1.Go to Layout>Add a gadget>Choose HTML/Javascript

2.Paste the below given code in content box 

<div id="slider">

<script type='text/javascript'>

var showpostthumbnails_gal  = true;

var showpostsummary_gal   = true;

var random_posts         = false;

posts_gal   = 10;
function

var numchars_gal   = 150;

var nu

m showgalleryposts(json) {

d.openSearch$totalResults.$t;
    var indexPosts = new A

var numPosts = json.fe

erray();

document.write('<ul>');

for (var i = 0; i < numPosts; ++i) {

.sort(function() {return 0

indexPosts[i] = i;
}

andom_posts == true){
    i
if (

rndexPost

s.5 - Math.random()});
}

if (numposts_gal > numPosts) {
  
numposts_gal = numPosts;
    }

ar posttitle_gal =  entry_gal.title.$t;

for (i = 0; i < numposts_gal; ++i) {
        var entry_gal = json.feed.entry[indexPosts[i]];
  
v        for (var k = 0; k <  entry_gal.link.length; k++) {
            if ( entry_gal.link[k].rel == 'alternate') {

in entry_gal) {
            var postcontent_gal = ent
posturl_gal =  entry_gal.link[k].href;
                break;
            }
        }
  if ("content
"ry_gal.content.$t
        }
        s = postcontent_gal;
        a = s.indexOf("<img");
        b = s.indexOf("src=\"", a);
        c = s.indexOf("\"", b + 5);

url_gal = 'http://i1133.photobucket.com
d = s.substr(b + 5, c - b - 5);
        if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
            var thumburl_gal = d
        } else var thum
b/albums/m596/abu-farhan/Images_no_image.gif';
        document.write('<li><div id="slide-container"><span class="slide-desc"><h2 style="margin:10px 0px;">');

summary_gal == true) {
            if (postconte
document.write(posttitle_gal + '</h2>');
        var re = /<\S[^>]*>/g;
        postcontent_gal = postcontent_gal.replace(re, "");
        if (showpos
tnt_gal.length < numchars_gal) {
                document.write(postcontent_gal);
                document.write('</span>')
            } else {

;
                postcontent_gal = postcontent_gal.substring(0, quoteEnd_gal
postcontent_gal = postcontent_gal.substring(0, numchars_gal);
                var quoteEnd_gal = postcontent_gal.lastIndexOf(" "
));
                document.write(postcontent_gal + '...');
                document.write('</span>')
            }
        }

document.write('</li>');
    }
 document.write('</ul>');
 
}
</script>
<script style="text/javascript">
 var numposts_
document.write('<a href="' + posturl_gal + '"><img src="' + thumburl_gal + '" width="200px" height="200"/></a></div>');
   
 gal = 6;
 var numchars_gal = 150;
 var random_posts = false; // random posts
</script>
<!-- replace with your web address (marked with red color) -->

pt>
</div>

<script src="http://yourblog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></scr

i

Customization

Important change

 replace yourblog with your blog url name in line121 in step 3 code 

Frame container

  in step 1 code

  adjust hight in line 3,8,42

  adjust width in line 5,13,41

Text background width

  adjust width in line 24 in step 1 code 

Next button position

  adjust position in line 54 (it should be frame container width+20px) in step 1 code

Next,previous button positon from top

  adjust position in line 64 in step 1 code

Post Image height and width 

  adjust height and width in line 110 in step 3 code

Enjoy...................

Pin It Now!