How To Add Recent Post Widget For Blogger Blog

This recent post widget is created by Beautiful Beta(http://beautifulbeta.blogspot.com/).Follow 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'>
//<![CDATA[

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

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 < 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, "");
if (!standardstyling) document.write('<div class="bbrecpost">');
if (standardstyling) document.write('<br/>');
document.write(posttitle);
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>');
 document.write(postcontent);
 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="http://beautifulbeta.blogspot.com">Beautiful Beta</a></span>');
if (!standardstyling) document.write('</div>');

}

//]]>
</script>

<script style="text/javascript">var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars = 200;var standardstyling = true;</script><script src="http://YOUR-BLOG.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>

Note : You must replace http://YOUR-BLOG.blogspot.com 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 site.you are done.