Recent Posts Widget for Blogger / Blogspot

Typically, these new articles often contain more information than the previous article. But as we all know most visitors come to our website through Google, and they do not know what they are missing in the new post. Therefore adding this widget to helps visitors can see many more useful information.

CSS

In the template coding, search for ]]></b:skin> and just above it paste the following code.

img.recent_thumb {padding-right:0.4em;width:72px;height:72px;border:0;
float:left;margin: 0 5px 5px 0;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}
.recent_posts_with_thumbs a {text-decoration:none;}

Javascript

Search for </head> and just above it paste the following code.

<script style='text/javascript'>//<![CDATA[
function showrecentpostswiththumbs(json){document.write('<ul 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='http://www.webaholic.co.in/other/no-image.jpg'}var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);document.write('<li class="clearfix">');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('<div>');document.write(postcontent);document.write('</div>')}else{document.write('<div>');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('</div>')}}var towrite='';var flag=0;document.write('<br><span>');if(showpostdate==true){towrite=towrite+cdmonth+'/'+cdday+'/'+cdyear;flag=1}if(showcommentnum==true){if(flag==1){towrite=towrite+' - '}if(commenttext=='1 '+rcp_comment)commenttext='1 Comment';if(commenttext=='0 '+rcp_comment)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">'+rcp_readmore+'</a>';flag=1}document.write(towrite);document.write('</span></li>');if(displayseparator==true)if(i!=(numposts-1))document.write('<hr size=0.5>')}document.write('</ul>')}
//]]></script>

Use in Blogger

Now go to Layout at your blog dashboard and  add new HTML/Javscript Gadget, paste the following code inside the empty box.

<script style='text/javascript'>
var rcp_readmore = 'Read more';
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 150;
</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

In this code you can customize a few things

• var rcp_readmore  Readmore phrase
• var numposts  Number of posts to display
• var showpostthumbnails  Show/hide post thumbnails
• var displaymore  Show/hide the read more link
• var displayseparator  Show/hide separator
• var showcommentnum  Show/hide the number of comments
• var showpostdate  Show/hide the posts dates
• var showpostsummary Show or not the posts summaries
• var numchars Number of posts characters

After everything is done, click on save gadget and your website did have a recent post.