jQuery Animated Scroll Recent Posts With Thumbnails Blogger Gadget




| 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.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

21 comments:

  1. 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. i canot use this plz hlp me ,

    ReplyDelete
  3. I could not use it...when added the result was empty blog so I removed it

    ReplyDelete
  4. it worked. see my blog. thank you very very much

    ReplyDelete
  5. @ Jagan and Tears - I have added a second code to the post that should work if the first one didn't.

    ReplyDelete
  6. 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
  7. 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
  8. 1st one not working..2nd one working partially as only 1st post is flashing and stopping..then after displaying empty place

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

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

    ReplyDelete
  11. @ 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
  12. 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
  13. 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
  14. Master,how i add width as size look like blog post Width????
    Regards

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

    ReplyDelete
  16. Wow! It`s a real cool gadget for blogger :) Thank you very much!

    ReplyDelete
  17. 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



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us