Recent Posts Widget For Blogger With Thumbnails

I received few comments in my blog and one of my readers requested a "Recent Posts" widget. To start off there are 2 methods to include this widget in your blog. One method will use the feed of your blog, just like the "Recent Comments" Widget explained in my previous posts. Since, the first method is very simple and self explanatory. I would like to skip this method and move on to the second method. This method includes a thumbnail of your recent posts and also displays the number of comments for that particular post as shown in the demo - Indian Food Recipes.

This post basically features about adding this type of widget to your blog. Follow these simple steps to install this widget on your blog.
1. Login to your blogger account and navigate to "Layout>>Page Elements". Click on "Add a Gadget" and select "HTML/JavaScript".
2. Copy the following code and paste in the pop up window that appears.

<center>
<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 = 298;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://YOURBLOGNAME.blogspot.com/";
</script>
<script src="http://xrl.us/bezqwo" type="text/javascript">
</script>
</center>

3. Change the code highlighted in green. That is, replace "YOURBLOGNAME" with the URL name of your blog. After you change the name, simply save the changes. Have a look at your blog with this cool widget installed in it!!!

Enjoyed the article?

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

What's Next?

Other Recommended Posts

blp3 said on July 5, 2009 at 12:38 PM :

That is the coolest thing I've learned in a while. Thank you very much.

Admin said on July 6, 2009 at 2:08 PM :

great share of the info. thanks

http://bloggerpinnacle.com

charcoal said on July 7, 2009 at 2:14 AM :

great gallery!!

Funny corner said on July 8, 2009 at 6:41 AM :

thnx for the trick, very useful. keep it up

Alvin Tan said on July 8, 2009 at 10:25 PM :

This "Recent Posts" widget really looks great!

Cheers,
Alvin Tan
Make Money Online with UndeniableProfits

adam said on July 10, 2009 at 4:44 AM :

Thanks for sharing.

Another Blogger said on July 11, 2009 at 7:12 AM :

Hey! This is great. I must try it on my blog. Thanks Bro!

neonguy528 said on July 16, 2009 at 9:58 AM :

A great blog. Great info. All the best.

Jane said on August 6, 2009 at 12:17 PM :

Useful Info, thanks

shabnam said on August 31, 2009 at 4:58 AM :

hi
i tried to install this widget but failed....instead of this widget i got only one line on my blog that says add to your blog which is clickable...when clicked it opens this page of ur blog...plz check & help me...my blog url is

http://styleuplife.blogspot.com/

Mukund said on August 31, 2009 at 10:33 PM :

@shabnam: Yeah! I visited your blog and I checked the code again. It is perfectly fine. Tried in my blog too! It is working. I think you placed in some where in the edit HTML part rather than the widget area. Please place it using "Add a Gadget" method. That is "Layout>>Page Elements>>Add a Gadget" and select HTML/javascript. It will work fine.

PG Preparation said on August 3, 2010 at 2:23 PM :

Hi,

Was wondering if it is possible to use this hack for a external feed.. such as one provided by feedburner? I want to pull feed from many of my other blogs and mix them up to display as recent posts.

The code u provided works only with one blog or label.

Example: instead of http://yourblog.blogspot.com/ , I want to use http://feeds.feedburner.com/your-unique-feed.

Thanks and regards, Dr.Vishaal Bhat.

Mukund said on August 3, 2010 at 5:21 PM :

@PG Presentation: I don't think it is possible to mix up the recent posts from different blogs. You will have to manually create a list of them..

PG Preparation said on November 12, 2010 at 4:01 PM :

neonguy528 said on November 12, 2010 at 4:01 PM :

shabnam said on April 19, 2011 at 10:47 PM :

சசிகுமார் said on September 21, 2011 at 11:27 PM :

Hi mukund did not work on my blog

www.techshortly.com

Mukund said on September 22, 2011 at 12:56 AM :

@சசிகுமார்: This is a widget that I posted way too back! I'll recheck the codes and publish a better one on my blog soon:) Sorry for the inconvenience!

Use the tab below to comment. No spam please!!!

POST YOUR COMMENT