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.
<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.
<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:
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
thanks dear
ReplyDelete
i canot use this plz hlp me ,
ReplyDelete
I could not use it…when added the result was empty blog so I removed it
ReplyDelete
it worked. see my blog. thank you very very much
ReplyDelete
@ Jagan and Tears – I have added a second code to the post that should work if the first one didn’t.
ReplyDelete
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
thanks a lot
ReplyDelete
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
1st one not working..2nd one working partially as only 1st post is flashing and stopping..then after displaying empty place
ReplyDelete
Requesting to made a widget for recent posts that moving like tv news headlines
ReplyDelete
i have added 2nd code on this site http://shan-computerworld.blogspot.com/ ….but it not work . please help me .thanks
ReplyDelete
@ 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
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
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
thanks dear
ReplyDelete
Thanks…..
ReplyDelete
Master,how i add width as size look like blog post Width????
Regards
ReplyDelete
can you tell me how to open those recent post link in new page automatically when clicked
ReplyDelete
Wow! It`s a real cool gadget for blogger 🙂 Thank you very much!
ReplyDelete
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