jQuery Animated Scroll Recent Posts With Thumbnails Blogger Gadget

Posted : Saturday, April 03, 2010 | Post Author : Paul Crowe | 21 comments

When people visit your blog it is important to keep them there for as long as possible, the longer someone is on your blog the more likely they will be to return and subscribe or follower.Displaying a list of your most recent posts in your sidebar is a great way to keep those visitors busy.There are lots of recent posts gadgets and archive gadgets you can use but the one we will cover in this post will defiantly grab the attention of people on your blog.

This recent posts widget is similar to the standard recent posts with thumbnails but with one great twist.This gadget displays your most recent posts and includes a small thumbnail but it has the added extra of using an animated effect that smoothly scrolls through the posts.

You can see a working example of the gadget on the Demo page here : Demonstration Blog

Animated Recent Posts For Blogger

Update May 2011 – Some people were having trouble with this gadget not working so i have added a second code.Just try the first code, making sure to add your Blogs URL as shown and if it does not work try the second code.

Step 1. In your dashboard click ‘Design’ > ‘Add A Gadget’ >

Step 2. From the pop up window choose the Html/Javascript gadget

Step 3. Copy the following code and paste it into the Html/Javascript gadget

Code 1.

Note – If you have previously added jQuery to your blog you can remove the line at the top in yellow.Also make sure to see the instructions below on adding your Blogs URL.

</a><script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js” type=”text/javascript”></script>

<style type=”text/css” media=”screen”>
<!–

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

–>
</style>

<script language=’JavaScript’>

imgr = new Array();

imgr[0] = “http://i43.tinypic.com/orpg0m.jpg”;

imgr[1] = “http://i43.tinypic.com/orpg0m.jpg”;

imgr[2] = “http://i43.tinypic.com/orpg0m.jpg”;

imgr[3] = “http://i43.tinypic.com/orpg0m.jpg”;

imgr[4] = “http://i43.tinypic.com/orpg0m.jpg”;
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = “#232c35”;

bgTD = “#000000”;

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = “#666″;

aBold = true;

icon = ” “;

text = “comments”;

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = “#666″;

icon2 = ” “;

numposts = 10;

home_page = “http://www.YOURBLOG.BLOGSPOT.com/”;

limitspy=4
intervalspy=4000

</script>

<div id=”spylist”>
<script src=’http://popular-post-blogger.googlecode.com/files/recentpostthumbspy-min.js’ type=’text/javascript’></script>
</div><a href=”http://www.spiceupyourblog.com/2010/04/animated-scrolling-recent-posts-gadget.html” title=”Blogger Tips and Gadgets” target=”_blank”><small>Get This Blogger Gadget</small></a>

Code 2

Note – If you have previously added jQuery to your blog you can remove the line at the top in yellow.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js” type=”text/javascript”></script>

<style type=”text/css” media=”screen”>

<!–

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:270px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:250px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://1.bp.blogspot.com/-CVfaz6Sj98Q/Td5MTWhbN4I/AAAAAAAAEGU/_c8DGc75vtU/s1600/bg23.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

–>
</style>

<script language=’javascript’>

imgr = new Array();

imgr[0] = “http://i43.tinypic.com/orpg0m.jpg”;

imgr[1] = “http://i43.tinypic.com/orpg0m.jpg”;

imgr[2] = “http://i43.tinypic.com/orpg0m.jpg”;

imgr[3] = “http://i43.tinypic.com/orpg0m.jpg”;

imgr[4] = “http://i43.tinypic.com/orpg0m.jpg”;
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = “#232c35”;

bgTD = “#000000”;

thumbwidth = 75;

thumbheight = 75;

fntsize = 13;

acolor = “#666″;

aBold = true;

icon = ” “;

text = “Replys”;

showPostDate = false;

summaryPost = 0;

summaryFontsize = 10;

summaryColor = “#666″;

icon2 = ” “;

numposts = 10;

home_page = “http://www.yourblog.blogspot.com/”;

limitspy=4
intervalspy=4000

</script>

<div id=”spylist”>
<script type=’text/javascript’>
//<![CDATA[
/*
* By Abu Farhan (www.abu-farhan.com)
*/
jQuery(function(){jQuery(“ul.spy”).simpleSpy(limitspy,intervalspy).bind(“mouseenter”,function(){jQuery(this).trigger(“stop”)}).bind(“mouseleave”,function(){jQuery(this).trigger(“start”)})});(function(e){e.fn.simpleSpy=function(f,g){f=f||4;g=g||5000;return this.each(function(){var l=e(this),k=true,i=[],m=f,o=0,h=l.find(“> li:first”).height();l.find(“> li”).each(function(){i.push(“<li>”+e(this).html()+”</li>”)});o=i.length;l.wrap(‘<div class=”spyWrapper” />’).parent().css({height:h*f});l.find(“> li”).filter(“:gt(“+(f-1)+”)”).remove();l.bind(“stop”,function(){k=false}).bind(“start”,function(){k=true});function n(){if(k){var p=e(i[m]).css({height:0,opacity:0,display:”none”}).prependTo(l);l.find(“> li:last”).animate({opacity:0},1000,function(){p.animate({height:h},1000).animate({opacity:1},1000);e(this).remove()});m++;if(m>=o){m=0}}setTimeout(n,g)}n()})}})(jQuery);function showrecentposts(z){document.write(‘<ul class=”spy”>’);j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var o=0;o<numposts;o++){var w=z.feed.entry[o];var g=w.title.$t;var f;var p;if(o==z.feed.entry.length){break}for(var l=0;l<w.link.length;l++){if(w.link[l].rel==”alternate”){p=w.link[l].href;break}}for(var l=0;l<w.link.length;l++){if(w.link[l].rel==”replies”&&w.link[l].type==”text/html”){f=w.link[l].title.split(” “)[0];break}}if(“content” in w){var r=w.content.$t}else{if(“summary” in w){var r=w.summary.$t}else{var r=””}}postdate=w.published.$t;if(j>imgr.length-1){j=0}img[o]=imgr[j];s=r;a=s.indexOf(“<img”);b=s.indexOf(‘src=”‘,a);c=s.indexOf(‘”‘,b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=””)){img[o]=d}cmtext=(text!=”no”)?'<i><font color=”‘+acolor+'”>(‘+f+” “+text+”)</font></i>”:””;var q=[1,2,3,4,5,6,7,8,9,10,11,12];var x=[“Jan”,”Feb”,”Mar”,”Apr”,”May”,”Jun”,”Jul”,”Aug”,”Sep”,”Oct”,”Nov”,”Dec”];var u=postdate.split(“-“)[2].substring(0,2);var h=postdate.split(“-“)[1];var t=postdate.split(“-“)[0];for(var e=0;e<q.length;e++){if(parseInt(h)==q[e]){h=x[e];break}}var n=(showPostDate)?'<i><font color=”‘+acolor+'”> (‘+u+” “+h+” “+t+”)</font></i>”:””;g=(aBold)?”<b>”+g+”</b>”:g;var v='<li><a href=”‘+p+'”><img src=”‘+img[o]+'” width=”‘+thumbwidth+'” height=”‘+thumbheight+'” class=”recent-thumb”/></a><a href=”‘+p+'” class=”recent-link”>’+g+'</a><div class=”spydate”>’+n+'</div><div class=”spycomment”>’+cmtext+”</div>”;document.write(v);j++}document.write(“</ul>”)}document.write(‘<script src=”‘+home_page+”feeds/posts/default?max-results=”+numposts+’&orderby=published&alt=json-in-script&callback=showrecentposts”></script>’);
//]]>
</script>
</div><a href=”http://www.spiceupyourblog.com/2010/04/animated-scrolling-recent-posts-gadget.html” title=”Blogger Tips and Gadgets” target=”_blank”><small>Get This Blogger Gadget</small></a>

Thanks to Abu Farhan for this code.

Important : If you look in the code you will find http://www.yourblog.blogspot.com/ replace this with your blogs URL.

Optional Changes : There are lost of changes that can be made to the code if your comfortable making changes, the main edit you may want to make is the number of posts displayed.To change the number of posts that are scrolled through change the following :

numposts =10;

You can change from 10 to the number of posts you wish to have displayed.

To see how to add the original version of this gadget that does not use the scroll effect check out the Featured Posts With Thumbnails Post from last month.

Add Your Comments, Views And Questions Below.

21 comments:

  1. Web Hosting ServiceMarch 16, 2011 at 5:10 AM

    I have seen this recent posts on many blogs lately and I was wondering how this was possible. I thought it was because of a addon or widget and I am correct. I will add this to my blog too.

    ReplyDelete

  2. hotactress-pictureMarch 28, 2011 at 4:10 AM

    thanks dear

    ReplyDelete

  3. i canot use this plz hlp me ,

    ReplyDelete

  4. I could not use it…when added the result was empty blog so I removed it

    ReplyDelete

  5. it worked. see my blog. thank you very very much

    ReplyDelete

  6. @ Jagan and Tears – I have added a second code to the post that should work if the first one didn’t.

    ReplyDelete

  7. Yanet @ 3 Sun Kissed BoysMay 29, 2011 at 3:45 PM

    I tried both codes and no luck. Code 2 displayed 3 previous posts (even though it was set for 10) but after “scrolling” through the 3 once, it stopped and was blank. Any suggestions?

    ReplyDelete

  8. thanks a lot

    ReplyDelete

  9. Permata PerjuanganJune 21, 2011 at 9:55 PM

    i tried..but when i’m done,it disturbing tab view..i remove the javascript..it also not work..can you help me?thanks

    ReplyDelete

  10. 1st one not working..2nd one working partially as only 1st post is flashing and stopping..then after displaying empty place

    ReplyDelete

  11. Requesting to made a widget for recent posts that moving like tv news headlines

    ReplyDelete

  12. i have added 2nd code on this site http://shan-computerworld.blogspot.com/ ….but it not work . please help me .thanks

    ReplyDelete

  13. @ Computer – This is not working for a lot of people I’m afraid.It seems to be effected by some other widgets on some blogs.If it does not work for you there is nothing we can do really, you will have to try something else 🙁

    ReplyDelete

  14. Robin@ Good for the PalateJuly 12, 2011 at 7:36 PM

    The second code works for me, but I prefer my blog features not to scroll. Can you add a code to stop the scrolling?

    Also, I want to have my posts appead side by side rather than in a line (horiz not vert) Can you help?

    ReplyDelete

  15. Is this the same as static thumbnail? I am not good at html. Could you provide me a dynamic thumbnail from featured posting?

    thanks.

    ReplyDelete

  16. Bollywood GossipsApril 25, 2012 at 3:17 PM

    thanks dear

    ReplyDelete

  17. Thanks…..

    ReplyDelete

  18. Master,how i add width as size look like blog post Width????
    Regards

    ReplyDelete

  19. can you tell me how to open those recent post link in new page automatically when clicked

    ReplyDelete

  20. mypress-release.bizNovember 19, 2012 at 8:41 PM

    Wow! It`s a real cool gadget for blogger 🙂 Thank you very much!

    ReplyDelete

  21. i heard that such widget also helps in reducing the bounce rate so i think that recent post widget should be more attractive so that it can engage the user and we can get more pageviews.and i think your widget will do this job for me.thanks for sharing.ringtones

    ReplyDelete