06 March 2010

Recent Posts widget (new version with Spy effect)

Advertisements

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

1. Simple Recent Posts widget using feeds

and

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 {
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://4.bp.blogspot.com/_tbHfaj1A058/TApc7py5kiI/AAAAAAAALBM/UjjPv8K4X4o/s1600/panigation.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 = "Replys";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

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

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
    <script type='text/javascript'>
//<![CDATA[
 /*
 * 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>');
//]]>
</script>
</div>

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.

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


Happy Blogging!

Related Posts

Newer Post Older Post Home

28 comments

Reply
Amit Kumar
March 7, 2010 at 6:22 PM

not working on my blog....
any help

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

Reply
Charlie
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!

Reply
drraman
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?

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

Reply
Juliet
March 10, 2010 at 12:09 AM

Thanks for commenting!

juliet xxx

Reply
wasay
March 21, 2010 at 11:14 AM

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

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

Reply
wasay
March 22, 2010 at 4:36 AM

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

Reply
Varunavi
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

Reply
drraman
May 14, 2010 at 11:17 PM

you are most welcome Varunavi

Reply
harfehesaab
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

Reply
drraman
June 1, 2010 at 12:39 AM

@ harfehesaab

You can't have post summary with above code.

Reply
Tan Sri Dato' Dr.Khairul™
June 15, 2010 at 11:30 AM

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

http://kroll101.blogspot.com/

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

Reply
drraman
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 {
text-decoration:none;
color:#4B545B;
font-size:11px;


if this not work then change the background image

http://4.bp.blogspot.com/_tbHfaj1A058/TApc7py5kiI/AAAAAAAALBM/UjjPv8K4X4o/s1600/panigation.JPG

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

Reply
Tan Sri Dato' Dr.Khairul™
June 16, 2010 at 2:20 PM

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

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

Reply
drraman
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/

Reply
Jobsplanet
July 21, 2010 at 12:04 AM

@draaman
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

http://my.naukri.com/manager/createacc2.php?othersrcp=5423&wExp=N

Reply
drraman
July 21, 2010 at 3:25 AM

get it here
Add Contact Form to Blogger blogs in 6 differant ways.

Reply
java
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
http://java-galaxy.blogspot.com/

Reply
drraman
August 29, 2010 at 6:50 AM

@ JAVA
Use following code
http://sites.google.com/site/freebloggerhelpbiz/freebloggerhelp/recentpostswithspycode.txt

also make sure tip about Jquery code.

Reply
sbt
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

Reply
drraman
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:

http://www.blogger-help.com/2010/05/simple-jquery-featured-content-slider.html

Reply
Haopee
August 26, 2011 at 9:41 AM

It worked on my blog. Thanks so much.

Reply
Osmanli Torunlari
November 3, 2011 at 8:29 PM

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

Reply
Anonymous
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 ?

Reply
DrRaman
February 28, 2012 at 6:39 AM

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

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More