How To Recent Post With Thumbnails in Blogger Widgets

How To Recent Post With Thumbnails in Blogger Widgets | Blogging In Web 2.0 Beta
Recent Post,Thumbnails,Blogger WidgetsSimple and Easy widget show make different look of blog. Watch out below picture or side bar of my blog you will see a recent post widget which shows a small thumbnail of picture in post and title of the post. In this widget we don't need to edit our html template.

Follow below Steps to install the widget.
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 =


<script src="" type="text/javascript"></script>

Note:-Please Download javascript in given code and upload on your server. Because bandwidth of this file increased, then it will not work properly.

1. http://YOURIMAGEURL.jpg is the default thumbnail which shows if your post doesn’t have any image. This has to be the URL of your thumbnail for the post. Try hosting it into your own server or Flicker or Photo bucket!

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

3. Set this link to your blog link , including the "/" forward slash mark.

4. this is a JS file so you need to download it and upload it into your server and change the link accordingly.

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


Related Posts by Categories

If Your Enjoyed this Article

Then you May Also Interested In Receiving Updated By Mail:

Enter your email address:-


iOD said...

This is very useful. BTW do you know how to swap the thumbnail figures to be alternately left and right along the recent posts?

iOD said...

This is very useful. I really like it. However, I've got two questions which are

1.How to configure the thumbnail images to be alternately left and right? Is there a way to do that by editing your code?

2.How manage a place to host your .js file on blogger?

Thanks in advance.

Gurpreet Singh said...

@iod Thanks for Visiting my blog. Sorry still this code is just to show image on left. I will try to edit it for easy navigation for left or right flot. About .js blogger will not host it your have to find an external free hosting sites who provides a hosting for java script files.

Mia said...

Hi, thanks for posting this , I needed a code like this - however , I believe there's something wrong with my template or something : I installed the code , uploaded the .js to my server , however : the widget doesnt show up on my page ? but thank you anyway :)

sungmin said...

Yours is the best so far. very professional looking, compared to others that has an advertisement of their own blog which is annoying. You are awesome!!!

Craft Passion said...

Can I use it in Wordpress? I placed the code in my side bar widget, downloaded the .js file into my hosting server, changed the Java Script location link and home_page name.... but nothing shows up on my side bar, can you please tell me why?

Gurpreet Singh said...

@ Craft Passion This Hack is just for Blogger Installed Blogs But For Wordpress I have No idea because i have never used wordpress.

Post a Comment