Recent Posts Widget With Thumbnails For Blogger Blog

This recent posts widget is a cool widget that can be found on most blogger or wordpresshosted site, but what makes this one to stand out, is that it shows the date in which the post was published, number of comments and more link button.
In my previous post, i shared a post on how to add recent post widget by feedburner and how to customize it using CSS, so you can go for that, if you are interested in recent post widget without thumbnail.

How To Add Recent Post Widget

Go to your blogger dashboard
Click on Layout > Add a Gadget > HTML/JavaScript
Copy and paste the following code in the content box.

<style type='text/css'>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;
float:left;margin:10px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script style='text/javascript' src='http://www.webaholic.co.in/other/recent-posts-widget-with-images.js'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;</script>
<script src='http://www.YOUR-BLOG-URL.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

To change the number of post to be displayed, simply find var numposts = 5 and replace 5 with your desired number.
Replace YOUR-BLOG-URL to your blog url
Click on the Save button.

That's all!
Share this with your friends/followers and subscribe for our future post update.

Recent Posts Widget With Thumbnails For Blogger Blog