Add Custom Recent Post Widget to Blogger

There are a lot of ways to get traffic to your blog, but I think the best and effective method is to build traffic by engaging them in your blog posts. This is not difficult to get instant traffic; you can get in by so many means out there. The most difficult thing is to build your traffic online. You have to find those people who are interested in your blog posts. Well, today I am going to post a simple method that allows you to show recent posts of your blog, you can read my previous post about writing killing blog post.

 

Why you Need it?

For example a reader approaches your blog via Google. If he likes your posts, he would definitely love to hear more from you. So this small widget will help you to involve that visitor into your recent post.

 

Why This Widget?

I am sure you are thinking why you need this widget, while there is already a built-in feature in blogger. There are lot of benefits of this widget, let me tell you some of them. Read here to add dynamic subscription box to your blog.
It’s handy and easily editable.
You can add your own styles in it.
You can use it anywhere in your blog if you know little bit about html editing.
So let’s start…

 

Recent Post Widget

I assume you know what to do at the start, if no let me tell you again.

• Log in to your blogger blog
• Click an open that blog which you want to use to add recent posts widget.
• Go to Layout and click on Add Gadget where you will add your html code.
• Select html gadget and paste the html code shown below.

<div id="recentposts">
<script>
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 = "....";
    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('<div class="title">');
    if (standardstyling) document.write('<br/>');
    document.write(posttitle);
    if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday + ' ' + cdyear);
document.write('</div><div class="posttext">');
    if (showpostsummary == true) {
      if (standardstyling) document.write('');
      if (postcontent.length < numchars) {
         if (standardstyling) document.write('<i>');
         document.write(postcontent);
         if (standardstyling) document.write('</i>');}
      else {
         if (standardstyling) document.write('');
         postcontent = postcontent.substring(0, numchars);
         var quoteEnd = postcontent.lastIndexOf(" ");
         postcontent = postcontent.substring(0,quoteEnd);
         document.write(postcontent + ' ' + readmorelink);
         if (standardstyling) document.write('');}
}
document.write('</div>');
    if (standardstyling) document.write('');
}
if (!standardstyling) document.write('<div class="widgetfooter">');
if (standardstyling) document.write('');
document.write('');
if (!standardstyling) document.write('');
}
</script>
<script>
var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="http://bloqr.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script></div>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
#recentposts a {color: #0B3861; font-size: 13px;}
#recentposts { color: #999999; font-size: 11px; border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}
</style>

Making Changes

You can make changing to this code by changing the highlighted text in the above code.

• Add class name title in you style sheet to add styles to post title.
• Add class name posttext in your style sheet to add styles to post summary.
• Change 5 to any other number if you want to show more or less then 5 posts.
• Replace this URL with your blog url.
• This text will appear if user browser doesn't support javascript.
• These are the styles already added to this widget.

Conclusion

So here goes the simple Recent Posts widget, you can add it anywhere in you blog. Just paste this in you blogger template and enjoy. Read here to use free Google fonts in your blog.