Adding a recent posts widget to your blogger blog is a good practice. Recent posts widget can really help you a lot in many ways.

1. Bounce rate of your blog gets likely to be reduced.
2. Your blog gets more page views.
3. The reader of your top indexed blog post from the search engine can see your latest content.
4. Takes up less space than the regular posts and you can show ten posts at a time with this recent posts widget.

Thus, adding a recent posts widget to your blogspot blog is good practise. I have styled this widget to best suit your blog. It can easily be used by adding just a widget through your layout section of blogspot blog. The following things are present in this widget, you can see the screenshot too.

This recent posts widget has got:

• A Read More button.
• A comments counter button.
• A thumbnail in recent posts.
• A short summary of your recent posts

Adding recent posts widget in your blogger blog:

You need to login to your blogger account. Open the blog where you want to add this widget. Go to the layout section of your blog. Click “Add a Gadget” in the side bar widget section of your blog. Select “HTML/Javascript” and there paste the following code:

<style type='text/css'>
.read_more { font-size: 10px; }
img.recent_thumb {float: left;margin: 0 6px; height: 75px; width: 75px;}
.read_more {float: right;}
.recent_posts_for_blogger i {font-size: 11px;}
</style>
<script type='text/javascript'>
function showrecentpostswiththumbs(json){document.write('<ul class="recent_posts_for_blogger">');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='http://4.bp.blogspot.com/-c7Arpj9JfrM/UfgfRos_71I/AAAAAAAABws/xTWNzdi8_OY/s1600/No+imag.jpg';}
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 class="recent_post">');if(showpostthumbnails==true)
document.write('<img class="recent_thumb" src="'+thumburl+'"/>');document.write('<b><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b><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><div class="read_more">');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('</div><div style="clear:both;"></div></li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('<hr size=0.5>');}document.write('</ul>');}
</script>
<script type='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>
&lt;script src='http://www.<span style="color: #ff0000;">talkofweb.blogspot.com</span>/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostswiththumbs'&gt;&lt;/script&gt;
&lt;a style="float:right;display:block;" href="https://www.talkofweb.com/recent-posts-widget-for-blogger-blogspot-blogs-thumbnails" rel="nofollow" target="_blank"&gt;Get this Recent Posts Widget&lt;/a&gt;

Please change the url talkofweb.blogspot.com to your own blogspot url (It’s at the last line highlighted with red color), or else domain name. Save the widget and give it any title which you want. Visit your blog and watch the recent posts with thumbnail and summary in action.

Controlling the number of posts in recent posts widget and other elements:

You can easily control many things in this recent posts widget like change the var numposts value in the above code, right now I have used 5 posts to be default number, you can increase that to 10 too, thus it will show you 10 most recent posts.

Also you can false any element to stop making it appear in the widget. Like you can set false value to the var showpostsummary if you don’t want summary to appear in this widget. Rest, you can always play around with things to control them more efficiently.

You can control the summary length in recent posts in this widget by changing var numchars value. By default it is set to show 100 characters. You can change 100 to anything.

You can always have a demo of this recent posts widget: Demo of Recent Posts Widget for Blogger