How to add Recent Posts Widget on Blogger Blogs

Recently one of our blog readers requested for a way to add a recent post widget on his blog. Today, I want to explain a simple way to add recent post widget on blogger blogs easily without much ado.

In this tutorial, am presenting you with two methods that you can use to add a recent post widget on your blogger blogs. The first method is adding manually while the second one is adding using generator. Both methods works very ok, you just have to go with the one that you prefer. Before You Proceed, read:

• Related Posts Widget for Blogger
• Add Cool Chat Box Widget on Blogger
• Top Commentators Widget for Blogger

Steps a Simple Recent Post Widget on Blogger

1. Log in to your Blogger Dashboard >> Layout >> Add a Gadget >> choose HTML/JavaScript
2. Choose & Copy the code below into the new HTML/JavaScript and then name it Recent Posts or any name that you like:

<div id="hlrpsb">
<script style="text/javascript" src="http://olusegun-fapohunda-calculator.googlecode.com/svn/justnaira/recent-post.js"></script>
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://Your-Blog_Address-HERE/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"><a href="http://www.justnaira.com/2012/01/recent-post-widget-for-blogger.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://www.justnaira.com" title="Recent Posts Widget">JustNaira</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#rpdr {background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF4FWcm4690q1yIZYvnhSgxD-r0PyXmWLJ4UWBDTQROex1s-svSRvA9q8vix7F2T3sHACEqDmNE0J80hijyuwRzkaWdP7IdM1xQaC4kESPJMdMrlhVyJoEsBD-uxYlpU79vxZ0O1GJzphl/s1600/blogger.png ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsb { }
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style> 

3. Click on Save Arrangement.
4. Don’t forget to change the Your-Blog_Address-HERE to your blog address e.g www.justnaira.com. You can also change the value of var numposts = 10 to any number of post you want to appear on the recent posts list and finally,you can change false in var showpostdate = false to true if you want the post date to appear on the recent posts list.

Add Recent Posts Widget to Blogger Using the Generator Below

A generator has been made so that recent post widget can be easily installed on blogger blogs without copying and pasting of code, but it will be easily installed directly on it.

You can customize how you want the recent posts widget to appear on your blogger blog by checking and uncheck what you want and what you don’t want to add to the widget on the generator above. Use the comment box below if you encounter any problem in the course of adding the widget.

Source: http://www.justnaira.com/2012/01/recent-post-widget-for-blogger.html