26 October 2009

Recent Posts with Image/Photo Thumbnail Widget


Your search is over for Recent Posts with Image/Photo Thumbnail Widget.

Though  you can add this feature by Blogger's Add a Gadget. ( Click on add a gadget >> Featured >> Recent Posts).

But it can not show Ads when you click on link.

So here is a more versatile widget for Recent Posts with Image/Photo Thumbnail.


First make sure all your Site Feeds are Full (Go to Settings >> Site Feeds >> Advanced Mode and check all feeds are full).

Now Go to Layout >> Add a Widget >> HTML/JAVA Script and Copy and Paste following code there.

<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 = 166;
cellspacing = 1;
borderColor = "ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 50;
fntsize = 12;
acolor = "#336699";
aBold = false;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://medimania.blogspot.com/";

<script src="http://free.blogger.help.googlepages.com/recentpostswiththumbnail.txt" type="text/javascript"></script>

Change http://medimania.blogspot.com/ to your site URL. Save your Template.

Variables Explanation

boxwidth - By changing this value you can alter width of this widget.

cellspacing - It is the space between Thumbnail and title.

borderColor - Background color of widget

thumbwidth & thumbheight - Width and Height of the thumbnail image

fntsize - It is the Font size of the title

acolor - Color of the title

aBold - It defines Bold title

numposts - It defines how many posts you want to show?

Other Recent Posts Widgets

1. Simple Recent Posts Widget using feeds
2. Recent Posts widget (new version with Spy effect)

Related Posts


November 16, 2009 at 7:56 AM

very nice tutorial. i wanna ask to you how do I get this widget does not appear as a recent post but a random post ?

November 18, 2009 at 12:25 AM

Check Random posts widget here


November 23, 2009 at 10:35 AM

HOw to show only posts with specific Label? as shown in revolutionchurchtemplate.blogspot.com?

November 24, 2009 at 12:15 AM

Did you mean when you click on any label it will show posts with brief description and not the full content of the post?

December 28, 2009 at 10:36 PM

images are not being displayed! :(

December 28, 2009 at 11:32 PM

please check and adjust

thumbwidth = 40;

thumbheight = 50;

March 22, 2010 at 10:52 AM

how to remove comment e.g. "(1) - comments" after post title? all i need just image and post's title only...pls guide me. tq

March 22, 2010 at 10:56 AM

how to make the thumbnail images were placed side by side instead of placed below?

March 23, 2010 at 1:16 AM

@ man chicha's mum

You can Delete/Change the comments word here
text = "comments";

thumbnails are place side by side and not bellow as shawn in demo.

May 18, 2010 at 8:55 AM

I was able to delete the "comments" word, but how to delete the numbers of comments?

May 18, 2010 at 11:55 PM

you can't do that.

Post a Comment


Twitter Delicious Facebook Digg Stumbleupon Favorites More