Recent Post Thumbnails Widget – Blogger Tweak



thumbnail Recent Post Thumbnails Widget   Blogger TweakThe 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 icon smile Recent Post Thumbnails Widget   Blogger Tweak

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.


PinExt Recent Post Thumbnails Widget   Blogger Tweak











Related Posts

Blogger Toolbox: Fresh, Free and Stunning Blogger Templates

40+ New and Fresh Blogger Templates

BloggerPower- A Super Flexible Blogger Template

Glassical: A Free Blogger Template ~ SmashingMagazine

Mindblowing Premium-Like Free Blogger Templates

Blogging Faceoff: Blogger vs. WordPress

HOW TO: Official Facebook Share Counters for Blogs

Create Mobile Version of Blog: 12 Free Alternatives

jQuery Powered Text / Font Resize Widget

HOW TO: Elegant CSS Message Boxes for Blogs

21 Comments

  1. Sudha

    05.09.2009

    Reply

    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!!! :)

  2. JOSH CULBERSON

    05.26.2009

    Reply

    is there anyway to set the widget so it doesn’t skew the image when its posted? maybe a custom thumbnail for each post?

  3. koentz

    05.27.2009

    Reply

    I’ve been looking for this kind of widget.. will try it soon.. thanks for sharing :)

  4. 4khmer

    07.13.2009

    Reply

    =)) good news

  5. aBlogz

    07.14.2009

    Reply

    WWowww.Nice template.Nice blog

    Can u shared me this template ?

    Thanks

  6. Phan

    07.14.2009

    Reply

    test comment gravatar

  7. cheth

    07.14.2009

    Reply

    @aBlogz

    thanks, which template? :)

    @MazBlog

    gravatar isnt supported on blogger :)

  8. bryandel

    07.15.2009

    Reply

    Check this cool Recent Post with Thumbnails Widget. http://bryandel.net/feed

  9. bryandel

    07.15.2009

    Reply

    Check this Recent Post with Thumbnails Widget that fetch it's content from your rss feed. http://bryandel.net/feed

  10. Admin

    07.16.2009

    Reply

    thanks

  11. Engadgeteer

    07.16.2009

    Reply

    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

  12. Luminary*

    07.29.2009

    Reply

    Thanks for the widget.

    Could you pls tell me how to remove "Comments" part from the widget.

    Thanks

  13. Gamez-Ring

    08.02.2009

    Reply

    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

  14. Lucas Tadeu

    08.14.2009

    Reply

    Wow!Awsome tutorial, I really wanted to know about that. Thanks for sharing :-)

  15. Jez

    08.22.2009

    Reply

    hi! nice widget. i would like to ask how i can have a "share this" widget like yours. thanks!

  16. The Team

    08.26.2009

    Reply

    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

  17. DesiHotMasala

    10.06.2009

    Reply

    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 ?

  18. nishad

    05.10.2010

    Reply

    the JS is not available ..

  19. foxicarea

    05.17.2010

    Reply

    can you tell me how to randome that post, please..?

  20. The A of DNA

    07.17.2010

    Reply

    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.

  21. conservativeBC

    10.15.2010

    Reply

    I am having trouble with the table withe.. It was working fine but now it has stopped

Leave a Reply








3 + = 12



Recent Tweets

Follow Me On Twitter →

Email Updates

Get all our latest posts delivered right to your mailbox.