Recent posts Widget with images for Blogger

Are you tired of using the recent posts widget for blogger that only displays recent post Titles with links? Here’s one new widget that displays the recent posts along with the thumbnail included in your post. Isn’t it interesting widget? Of course it is. Well, recent posts widget is the most have widget for your blog and this thumb nailed widget is more interactive to showcase your recent posts. I am sure you gonna drive some more traffic through this widget by displaying your recent posts with adjacent to the thumbnails. One more interesting thing is that if you have added recent posts widget through that RSS method, it only has the option to display up to five posts and now with this widget you can display as many posts as you want along with your desired colors and proper customization.

Widget Adding Instructions:

Follow these simple steps to get this widget on your blog.

1. Login to your Blogger Dashboard

2. Click on the blog’s Layout on which you want to add this widget

3. click Add a Page Element on spot you want to add this widget

4. Add Html/ Javascript (click “add to blog” under the page element Feed)

5. Just copy and paste this code.

<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://yourblogurl.com/";

</script>

<script src="http://bloggeruserutilities.googlepages.com/recentposts_thumbnail.js" type="text/javascript"></script>

6. Save the Widget.

Widget Customization

Edit the values under the following headings in the above html code to make the widget suitable for your blog. The matching colors may help you to easily distinguish to change the colors.
(Edit the values to fit your blog)

boxwidth - Width of the widget
cellspacing - Space between cells (default one is good)
borderColor - Border color (add the background color of your template to perfectly blend it in the template)
thumbwidth & thumbheight - Width and Height of the thumbnail (default are good)
fntsize - Font size of the title
acolor - Color of the title
aBold - you want bold titles? (true or false)
numposts - How many posts you want to show?
home_page : http://yourblogurl.com/ (change this to your blog url)
Please download this script ( http://bloggeruserutilities.googlepages.com/recentposts_thumbnail.js )and upload to your server or some free pages.

Help and Comment

This widget is developed by Kranthi for her blog Blogger Tricks. Really thanks. If you have any problems or any queries related to this widget, Please leave a comment below and I would be glad to help you !You can also comment if this widget has really helped you as i said.

You may also be interested in exploring the Rss method of adding recent posts widget.