Sunday, August 9, 2009

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 right. The picture to the right is taken from my sister's blog. (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!!!

0 comments:

Post a Comment