How To Add Recent Post Widget For Blogger Blog

Posted by Lasantha Bandara on May 2nd, 2009 File Under : gadget, post, widget2 Comments

This recent post widget is created by Beautiful Beta( the steps given below to add this recent post widget to your blogger blog.

1.Log in to your dashboard--> layout

2.Click on "Add a Gadget" and Select "HTML/Java Script".Now add the code given below.

<script type='text/javascript'>

// ----------------------------------------
// ----------------------------------------
// This functions takes a blogger-feed in JSON
// format and displays it.
// Version: 2.0
// Date: 2006-12-01
// Author: Hans Oosting
// URL:
// ----------------------------------------

function showrecentposts(json) {

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 <; k++) {
if ([k].rel == 'alternate') {
posturl =[k].href;
posttitle =;
var readmorelink = "(more)";
readmorelink =;
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;}
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (!standardstyling) document.write('<div class="bbrecpost">');
if (standardstyling) document.write('<br/>');
if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);
if (!standardstyling) document.write('</div><div class="bbrecpostsum"">');
if (showpostsummary == true) {
if (standardstyling) document.write('<br/>');
if (postcontent.length < numchars) {
if (standardstyling) document.write('<i>');
if (standardstyling) document.write('</i>');}
else {
if (standardstyling) document.write('<i>');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...' + readmorelink);
if (standardstyling) document.write('</i>');}
if (!standardstyling) document.write('</div>');
if (standardstyling) document.write('<br/>');
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('<br/>');
document.write('<span >Widget by <a href="">Beautiful Beta</a></span>');
if (!standardstyling) document.write('</div>');



<script style="text/javascript">var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars = 200;var standardstyling = true;</script><script src=""></script>

Note : You must replace with your real URL.

You can change the values of var numposts , var showpostdate , var showpostsummary ,var numchars , var standardstyling ,etc....

3.Click on Save And Refresh your are done.

File Under : gadget, post, widget

2 Responses to “How To Add Recent Post Widget For Blogger Blog”

  1. Nadeem says:

    I want know that how I gernate robot.txt in blogger

  2. Michael H says:

    Hi there -
    I just wanted to see thank you for showing how to do the "How to add a Recent Post Widget for your blogger blog". I was trying to figure out how to do that with some other strategies but when I found your explanation, I could not believe how easy it was to do. And I love the way that the recent posts look too on my blog. Perfectly what I was hoping for and more. Thanks again. I will be checking out your site for other cool stuff too on blogging too.
    I am doing my site on free software finds and other reviews too. Thanks again and take care!

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.