Recent Post Widget with Thumbnails (+Hover Effect) for Blogger.

Recent post widget is a blogger widget which displays latest posts from your blog. Along with random post widget, related post widget and popular post widget, it makes a perfect combination for maximum exposure of you content to the audience.

The background image in the left figure gives you a idea of what the widget looks like after installing this widget into your blog.

For further modifications and designs, check out customization part at the last of this post.

How to Install Random Post Widget in Sidebar?

Step1. Login to Blogger Dashboard, Go to “Layout” and then click “Add a Gadget” in sidebar area.

Step 2. Select “HTML/JavaScript” in the list of widgets:

Step 3:  In “Title” text area, enter “Recent Posts” and paste the following code in “Content” text area:

<style type='text/css'> .recent_thumb {float: left; margin: 0 12px 2px 0; border: 1px solid #8ABB8A; width: 72px; height: 72px; border-radius: 5px;} .recent_thumb:hover {opacity:0.6;} .recent_posts_with_thumbs {float: left;} ul.recent_posts_with_thumbs {padding: 0 0 0 0em; margin: 0; line-height: 1.2; list-style: none;} .recent_posts_with_thumbs li {padding: .7em 0; min-height:75px; list-style: none; font-size: 13px;} .recent_posts_with_thumbs a {text-decoration:none;}</style>

<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
</script>

<script style='text/javascript'>
function showrecentpostswiththumbs(json){document.write('<div class="recent_posts_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAA9CBPsqzjBZsLi7tsCYjrPNR0ixtUdUVlpDz8YJlSWg4U5O_TK07txZgjREp4FEBWwlNOm6LphQXH6gwaC7RB5uBWHgkKPfj-_daMC4Zp8c710SjO6cLq5_bdyEcQTs9RZIllqvHfvw/s1600/no_thumb.png';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li>');if(showpostthumbnails==true)
document.write('<img class="recent_thumb" src="'+thumburl+'"/>');document.write('<a href="'+posturl+'" target ="_top">'+posttitle+'</a><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('<i>');document.write(postcontent);document.write('</i>');}
else{document.write('<i>');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('</i>');}}
var towrite='';var flag=0;document.write('<br><strong>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More -></a>';flag=1;;}
document.write(towrite);document.write('</strong></li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('<hr size=0.5>');}document.write('</div>');}
</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script><div style='float:right; font-size:10px; vertical-align: bottom; float: right;'><a href='http://blogger-hatchery.blogspot.com/2014/12/nrelate-alternatives-related-post.html' target='_blank'>Get this widget</a></div>

Step 4. Click on “Save” to save the changes.

Step 5. Now you have done. The recent posts widget will appear in sidebar of your website.

Customization of Recent Post Widget:

The recent post widget can be customized in the following ways:

1. Yellow highlighted code: Change number value from 5 to any other value equals to number of posts to be shown in the widget.
2. Orange highlighted code: Change value from “true” to “false” to not to display thumbnails with posts.
3. Maroon highlighted code: Change value from “false” to “true” to not to display separator below posts.
4. Green highlighted code: Replace “false” with “true” to show number of comments below posts titles in the widget.
5. Red highlighted code: Replace “false” with “true” to display post publishing date in the widget.
6. Purple highlighted code:  Replace “false” with “true” to display post summary below post titles in the widget. “numchars” value can be changed from 100 to any other value to suit the need of number of characters in the post summary.

The figure on the above right shows a snapshot of recent post widget with Comments, Date of publication, Separator and "More" enabled.

Note: For those who looking for similar design of Recent post widget and Popular post widget, install our popular post widget (with same design as given in this post) given here:

Popular Post Widget for blogger.

Subscribe us for more similar designs sets for both the widgets.

I am sure that this posts have helped you. You should share and subscribe for further updates and new themes for the widget.

In case of any inquiry, please use comment box.