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!
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.














21 Comments
Sudha
05.09.2009
Hey how come I missed this one yesterday.. Thank God as I’m a subscriber of your blog today saw this widget in my mail..I think cheth studios is a great resource for all the bloggers out there..your blog is a one stop place for us bloggers to know and get everything right from all the freebies to very useful hacks and widgets! Thank you soo much chetz for sharing all these useful hacks and widgets with us!!!
JOSH CULBERSON
05.26.2009
is there anyway to set the widget so it doesn’t skew the image when its posted? maybe a custom thumbnail for each post?
koentz
05.27.2009
I’ve been looking for this kind of widget.. will try it soon.. thanks for sharing
4khmer
07.13.2009
=)) good news
aBlogz
07.14.2009
WWowww.Nice template.Nice blog
Can u shared me this template ?
Thanks
Phan
07.14.2009
test comment gravatar
cheth
07.14.2009
@aBlogz
thanks, which template?
@MazBlog
gravatar isnt supported on blogger
bryandel
07.15.2009
Check this cool Recent Post with Thumbnails Widget. http://bryandel.net/feed
bryandel
07.15.2009
Check this Recent Post with Thumbnails Widget that fetch it's content from your rss feed. http://bryandel.net/feed
Admin
07.16.2009
thanks
Engadgeteer
07.16.2009
I find a really great and cool, easy to install recent post widget with thumbnails,
you may find the quick installation guide here:
http://www.engadgeteer.com/2009/07/recent-posts-widget-with-thumbnails.html
Luminary*
07.29.2009
Thanks for the widget.
Could you pls tell me how to remove "Comments" part from the widget.
Thanks
Gamez-Ring
08.02.2009
this information or post an interesting
Can you change a little, when the description of the post made a tooltip when the mouse so focused on the title or the image will appear description, (in the recent post description posts do hidden).
how this is to save space on our blog.
if you find something on this, I hope you can email to me kurcool3@gmail.com, thank you.
having fun friend
Lucas Tadeu
08.14.2009
Wow!Awsome tutorial, I really wanted to know about that. Thanks for sharing
Jez
08.22.2009
hi! nice widget. i would like to ask how i can have a "share this" widget like yours. thanks!
The Team
08.26.2009
thx. so much for this… it has added a lot of depth to our website and we can't thank you enough!!!!!! you can take a look at how we implemented it at http://www.theweeklydope.com
DesiHotMasala
10.06.2009
Chethan … the recent posts json feed has the thumbnail but the recent comments feed doesnt… I tried but its doesnt fetch the thumbnails… the entry.media$thumbnail.url is missing…
any clue ?
nishad
05.10.2010
the JS is not available ..
foxicarea
05.17.2010
can you tell me how to randome that post, please..?
The A of DNA
07.17.2010
I was wondering if you knew of anything like this that does Random posts rather than most recent?
I'd appreciate it.
Thanks. Great blog btw.
conservativeBC
10.15.2010
I am having trouble with the table withe.. It was working fine but now it has stopped
There are no trackbacks to display at this time.