Recent Post Thumbnails Widget - Blogger Tweak

The Most simple and neat blogger widget Credits go to mlxperience for putting this up! I was surfing at random and stumbled across this neat blogger widget at ~ Recent Post Thumbnails Widget which is a Blogger Tweak, unlike other hacks for blogger this one is a neat and easy widget style. All you have to do is paste the code in a new HTML/JavaScript gadget and done!


Lets get away directly with this widget.

Now as we always do login into your Blogger Dashboard

Dashboard > Layout > Edit HTML and check the "Expand Widget Templates" option.

Now as a precautionary measure please download your template so that you have an emergency backup if in case you create any errors :)

Now go to Dashboard > Layout > and then copy and paste the following code into a HTML/JavaScript widget in the "Page Elements" And Save it!

<script language="JavaScript">
imgr = new Array();


imgr[0] = "http://YOURIMAGEURL.jpg";
imgr[1] = "http://YOURIMAGEURL1.jpg";
imgr[2] = "http://YOURIMAGEURL2.jpg";
imgr[3] = "http://YOURIMAGEURL3.jpg";
imgr[4] = "http://YOURIMAGEURL4.jpg";

showRandomImg = true;


tablewidth = 248;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#ffffff";

imgwidth = 118;
imgheight = 100;

fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 50;
summaryFontsize = 11;
summaryColor = "#666";
icon2 = " ";

numposts = 5;

home_page =

"http://chethstudios.blogspot.com/";

</script>
<script src="http://wrath.xzibition.com/~jellybeans/recentposts_thumb.js" type="text/javascript"></script>

Now the Customization part:

1. http://YOURIMAGEURL.jpg is the default thumbnail which shows if your post doesnt have any image. This has to be the URL of your thumbnail for the post. Try hosting it into your own server or Flickr or Photobucket!

2.imgwidth = 118 and imgheight = 100 are to be adjusted as per your liking to get the perfect syle for your widget.

3.http://chethstudios.blogspot.com/ Set this link to your blog link , including the "/" forward slash mark.

4.http://librarysupporter.googlepages.com/recentposts_thumb.js this is a JS file so you need to download it and upload it into your server and change the link accordingly.

5. Dont forget to set your feed settings to full so that the script locates image in each post.