Blogger Tips: How to show recent posts in Blogger blog?

Recent Posts allows visitors to quickly see the most recent blog posts if they are interested. In this post, we'll see how to show recent posts in Blogger blog that I tried. This will add a widget and list the latest blog posts on Blogger blog. By default, Google Blogger provides widgets for "popular posts" but there is no widget provided for "recent posts". This widget once added will allow visitors to quickly see the most recent blog posts in the sidebar or wherever you add the widget to.

To add a widget, we login to Blogger dashboard and navigate to "layout", then click on the "add a gadget". If we can find the gadget or widget we want to add, we simply click on the plus sign "+" and the widget is added. I wanted to test this out and search for "recent posts" widgets in Google Blogger and could not find one.

To add a recent post widget in Blogger blog, do the following:

• Login to Blogger Dashboard > Layout
• In the template area where you want the widget to appear, click on "add a gadget"
• In the gadgets selection window, select "Add HTML/JAVASCRIPT"
• Copy and paste the code below:

<script>var numposts =5; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://blogname.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script>

Configuration:

Edit blog name: 
blogname: replace the blogname with your blog name.
Number of recent posts to show:
numposts=5: displays 5 posts. change it to the number of recent post links to show.
Show the post date or not:
showpostdate: true or false
Show post summary or not:
showpostsumamry: true or false
How many character to show in post summary?
numchars: enter the number of character to display

• Click ok. Widget is added.
• Click "Save Arrangement"
• Click on "View Blog" and check if the recent posts widget appears.

If the recent posts does not display, do the following:

• Click on "Template" from the left Blogger sidebar menu 
• Click "Edit HTML"
• Click anywhere in the code area and press Control(CTRL)+F
• Type "</html> and hit enter to search
• Paste the code below right above </html>

<!-- FOR RECENT POSTS. Widget also added-->
  <script type='text/javascript'>
//<![CDATA[
function rp(json){document.write('<ul>');for(var i=0;i<numposts;i++){document.write('<li>');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=='alternate'){posturl=entry.link[k].href;break}}posttitle=posttitle.link(posturl);var readmorelink="(more)";readmorelink=readmorelink.link(posturl);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";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,"");document.write(posttitle);if(showpostdate==true)document.write(' - '+monthnames[parseInt(cdmonth,10)]+' '+cdday);if(showpostsummary==true){if(postcontent.length<numchars){document.write(postcontent)}else{postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...'+readmorelink)}}document.write('</li>')}document.write('</ul>')}
//]]>
</script>
<!-- RECENT POSTS. Widget also added--> [credits for the code: newbloggerthemes.com]

•  Click "Save Template"
• Click View Blog and see if the recent posts  appears.

I have tried the above code and it works. A recent posts widget was successfully added and recent blog posts are displayed.

How to show recent posts in Blogger blog using Feed widget?
If you simply want to display list of recent post links of up to 5 links, then you can also do so by using the Blogger "Feed" widget. To add the Feed widget, do the following:

• Go to Layout and add a gadget like normally. 
• Find widget "Feed" and add.
• Enter the feed URL
• By default it is: "http://blogname.blogspot.com/feeds/posts/default" 
• If you have already setup a redirect feed such as "Feedburner", get the URL from Settings > Other > under "Site Feed" > "Post Feed Redirect URL" > copy the URL from there. 
  

Settings > Other > Post Feed Redirect URL

• Configure the number of links to show, whether to show post date and auther information etc.
• Click Save

The recent posts displayed using the Feed widget is displayed as shown below:

Like wise, if we want to display recent blog posts from another blog's feed, you can also do so in a similar way. In a ways, instead of adding code in the Blogger template, it is easier to display recent blog posts using the "Feed" widget. The limitation is that it can display up to only 5 posts.

So which method do you like - the manual code entry or using the "feed" widget?