How to Add A Recent Post Thumbnail Widget in Blogger / Blogs

Thumbnail Widget Adding into the Blog / Blogger

I would see this on blogs, but it would say Blogger Widgets. So I'd go searching. I could never find it. So I assumed they did away with it. Then, I don't quite recall how I did it, but I found a way, probably with FireBug (look it up on Firefox: It enables you to look inside someone else's code. Nifty, huh? 

Anyway, I finally pieced it together. Below is the code. Copy and paste the code into a Blogger HTML Gadget.

You would add this code to an HTML Gadget. If you want the thumbnails just above your post, take your cursor and pick it up and move it there. 

Before you move it, you will need to use your information and not mine. If you choose, you could print it out or put it in Notepad. But it's really pretty quick, so I just added the Gadget, changed what I needed to, then moved it on top of my posts. 

When you move it, you need to wait a few seconds for the gadget space to accommodate it. Hard to explain!

There are only a few things you might change from this code besides your blog name. That is:

var numberOfPosts. As you can see below, I have mine set at 5. That means 5 thumbnails. 

var imgDim

This is the size of your thumbnails. You can play around with this number until you have it looking as you like. I have mine set at 125.

I do believe those are the only two changes I made. Go look above my top post to see if this is what you want.

I will highlight in yellow what you need to customize for your own blog, and you copy the code below:

<div id='bp_recent'></div><div class='bp_footer'><small><a id='bp_recent_link' target='_blank' href='http://www.bloggerplugins.org/2011/09/recent-posts-thumbnails-blogger-widget.html?utm_src=BP_recent' style='padding: 1px 0px 0px 19px;text-decoration:none;'><img src='http://image.bloggerplugins.org/blogger-widgets.png' alt='Recent Posts with Thumbnails for Blogger' style='border:none' /></a>Powered By <a href='http://www.bloggerplugins.org/?utm_src=BP_recent' target='_blank' title='blogger widgets'>Blogger Widgets</a></small></div>

<script style='text/javascript' src='http://bloggergadgets.googlecode.com/files/recentposts_orig.js'></script>

<script style='text/javascript'>

var numberOfPosts = 5;

var showPostDate = false;

var showSummary = false;

var titleLength = 0;

var showCommentCount = false;

var showThumbs = true;

var showNoImage = true;

var imgDim = 125;

var imgFloat = 'left';

var myMargin = 5;

var mediaThumbsOnly = true;

var showReadMore = false;

</script>

<script src='http://www.cozylittlehouse.com/feeds/posts/summary?max-results=5&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

When you are satisfied, click Save.

That's it!