06 March 2010

Recent Posts widget (new version with Spy effect)


Recent posts hack is always popular with bloggers. As we already have two versions of it.

1. Simple Recent Posts widget using feeds


2. Recent Posts with Image/Photo Thumbnail Widget

Here is the next version of Recent Posts widget with image thumbnails. But interestingly it includes a Spy Effect. This widget is not only elegant but also very easy to add to blogger.

The Demo is already present on free-blogger-help.blogspot.com/

How to Add Recent Posts widget (new version with Spy effect)

Just go to Dashboard > Layout > Page Elements > Add A Gadget > HTML/Java Script. And add following code there and save it.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">

#spylist {
padding:0px 0px;
#spylist ul{
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
#spylist li {
padding: 5px 5px;
margin:0px 0px 5px 0px;
overflow: hidden;
background:#fff url(http://4.bp.blogspot.com/_tbHfaj1A058/TApc7py5kiI/AAAAAAAALBM/UjjPv8K4X4o/s1600/panigation.JPG) repeat-x;
border:1px solid #ddd;

#spylist li a {
margin:0px 0px;
padding:0px 0px 2px 0px;
#spylist li img {
padding:2px 0px;
margin:1px 0px 0px 0px;
font-family:Tahoma,Arial,verdana, sans-serif;

font-family:Tahoma,Arial,verdana, sans-serif;
padding:0px 0px;
margin:0px 0px;


    <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 = "Replys";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://free-blogger-help.blogspot.com/";



<div id="spylist">
    <script type='text/javascript'>
 * Recent Post with Spy effect for blogger.com
 * Script combined from bloggerstricks.com and spy effect from jqueryfordesigners.com
 * 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>');

UPDATE - If above code is not working with you then use the code given here.

If your template already have the JQuery code (http://ajax.googleapis.com/ajax/libs/jquery) then from above code remove the following part

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

You can easily customize this widget to suite your blog.

numposts = 10;
is the total no. of posts that will be shown in your blog.

home_page = "http://free-blogger-help.blogspot.com/" to home_page = "Your blog URL";

Happy Blogging!

Related Posts


March 7, 2010 at 6:22 PM

not working on my blog....
any help

March 8, 2010 at 12:51 AM

@Amit Kumar

Look this code and add your blog url.

home_page = "http://free-blogger-help.blogspot.com/";

Also check in your HTML if you already have JQuery code.

March 8, 2010 at 7:46 AM

Hi there! this blog is great! I have one question I hope you can give me advice, cause I havent found a solution elsewhere. When I started blogging I chose a bad template but now have done so many small changes to it dont want to choose a new template. I wanna change the colour of the blog. Id like the post bar and the sidebar to be situated in the center of the blog on white background and the rest of the bqckground to be of different colour. Kinda like yours or http://vendetan.blogspot.com. My blog is at www.charliesboudoir.blogspot.com. Ive tried different things but cant figure it out cause Im an amateur with coding stuff. now the main text is on white background but text starts too left and pictures are not centered either. I hope u can help! Thank u in advance!

March 8, 2010 at 10:53 PM

@ Charlie
You want to leave margin on Left and Right side. Your post background color is already white and now you want white background color for sidebar?

March 8, 2010 at 10:57 PM

@ Charlie
Go to Dashboard> Layout > Edit HTML. There is a option of Download full template. Download it and send it to gabbar1113@gmail.com
Then I will experiment the changes you want.

March 10, 2010 at 12:09 AM

Thanks for commenting!

juliet xxx

March 21, 2010 at 11:14 AM

its not working for me. i did exactly what you have mentioned above please help me

March 22, 2010 at 12:08 AM

Download the code here - http://sites.google.com/site/freebloggerhelpbiz/freebloggerhelp/recentpostswithspycode.txt
Then add it to Gadget.

March 22, 2010 at 4:36 AM

its working now thank you very very much......

May 14, 2010 at 10:31 AM

Used two widgets from here--most popular post widget and recent post widget.Both are working excellently.Thank u so much

May 14, 2010 at 11:17 PM

you are most welcome Varunavi

May 31, 2010 at 1:05 PM

Dear Drraman
This is a very wonderful and easy to use widget. Thanks. I have one problem, though, why there is no summary while in the code there is a mention of it. Can you please say how I can have summary also appear on each link. I wait for your answer. This is my email: harfehesaaby [@} gmial [dot] com

June 1, 2010 at 12:39 AM

@ harfehesaab

You can't have post summary with above code.

June 15, 2010 at 11:30 AM

hiii...got problem with the text colour...here my blog link


i tried to change it to black by changing the colour code...but nothing happen...i think the problem is text colour of the template...hope u can help to solve my problem..

June 16, 2010 at 2:30 AM

Hi Tan Sri Dato' Dr.Khairul™
Your sidebar text color is white.
Change font color here

#spylist li a {

if this not work then change the background image


change it's color from white to your needed one upload to blogger then change image URL in the code.

June 16, 2010 at 2:20 PM

thanks drraman...my problem solved by changing the background...thanx againn...(^_^)

June 19, 2010 at 7:01 AM

Hi friend i am getting an error as in my site http://btips.cz.cc
the titles were going left side please solve my error and please send the code to my mail id kv_p@in.com
Once see it and it also i want to increase the thumb size....

June 19, 2010 at 6:14 PM

You have custom domain. Increase the width of your sidebar.

Increase height of thumbnail here: thumbheight = 70;

Or if you want to use this new widget(recent updates)
DEMO: http://spicex.blogspot.com/

July 21, 2010 at 12:04 AM

is it possible that i can add submit resume option on my blog where candidate can upload file and submit resume, here is the link for example


August 29, 2010 at 4:06 AM

Thank u so much i am looking one like this from a long time but i have a problem using this .
The spy effect is not working and also it is displaying something like undefined replys.
Looking forward....... Thank u

August 29, 2010 at 6:50 AM

Use following code

also make sure tip about Jquery code.

April 7, 2011 at 2:56 PM

Nice post,can i get the slide in horizontal direction and can i get the no of showing into 5, i mean in display,hope u understang

April 7, 2011 at 8:01 PM

@ sbt
to show the 5 posts

change value at

numposts = 10;

It can not work on horizontal sliding. You may need content slider for that:


August 26, 2011 at 9:41 AM

It worked on my blog. Thanks so much.

November 3, 2011 at 8:29 PM

Thanks man! Good job!! It worked my blog! Thans so much!!!

February 27, 2012 at 10:57 AM

I have problem when i added this recent post slider, my next slider in main page has been stop. Who has a proposal ?

February 28, 2012 at 6:39 AM

Is it featured post slider... but recent posts slider do not interfere with it!

Post a Comment


Twitter Delicious Facebook Digg Stumbleupon Favorites More