Recent Posts with Thumbnails Widget for Blogger

Thursday, September 16, 2010 Category: 0 comments

This tip explains how to add Recent Posts widget in Blogger with image thumbnails and comment count.

So, let's see how to install this widget in your blog.

1. Sign into Blogger dashboard.

2. Go to Layout » Add a gadget » Html/javascript.

3. Just copy and paste this code in it.

<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://yourblog.blogspot.com/";
</script>

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

Note: Edit the values to fit your blog.

boxwidth - Width of the widgetcellspacing - 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 titleacolor - Color of the titleaBold - if you want bold title, choose true, if not then choose false
numposts - How many posts you want to show?
home_page : http://yourblog.blogspot.com/ (change this to your blog url)
This script is currently hosted in my server ( http://viprolang.250free.com/js/recentposts_thumbnail.js ).
But, it is strongly recommended to download the script and upload to your own hosting (google for free javascripts hosts) and replace that url with yours.

4. Last but not the least.. Save the Changes. Make sure you selected YES in Settings » Site Feed » Full » Allow Blog Feeds.




Total Comments: 0

Write a Comment on Backup Form

Post a Comment

You can use some HTML tags such as <b>, <i>, <a>