Did You Miss A Recent Post Thumbnail Widget

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 Fire Bug (look it up on Firefox: It enables you to look inside someone elses 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 in a 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!

Want To Get Each New Post Emailed To Your Inbox?

Enter your email address:


Delivered by FeedBurner