Simple Recent Posts Widget for Blogger/Blogspot

The main advantage on this Recent Posts widget is that it will show not only post title but also post excerpts or snippets and it's easy to customize/apply different style on it. To style it into your own design, you just have to modify the CSS style.


What are the facilities:

       

         1.display post title only

         2.change the number of posts
         3.change the number of characters of the post snippet/excerpt.
         4.show the post dates

How to do it:

Step 1: Log in to your Blogger account and go to Dashboard, click on Layout and then click on Add a Gadget .

Step 2: A pop-up window will open, scroll down and choose HTML/JavaScript from there.

Step 3: Select & Copy the code from one of the options below and paste it into new HTML/JavaScript.

option 1: Recent posts widget with snippets

<div id="hlrpsa">
<script src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.js">
</script>
<script>
var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script></div>
<div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">
<a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" target="_blank" title="Grab this Recent Posts Widget">Recent Posts Widget</a> by <a href="http://helplogger.blogspot.com" title="Recent Posts Widget">Helplogger</a></div>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
#hlrpsa a {color: #0B3861; font-size: 13px;} #rpdr {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNQaxQ61ht-nXDIvdVbhJm8cBV18kJvWGjGItd4ljW_SHiZq_y3vAu_zUFDV9bJrp9Dy03fTrgRFGpzCUGhbjEsEZcfnkpSW1F6FcLViYBRph5X2ScrmPLVG1jul4s8lz2v3zrqM5PrqYY/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;}
#hlrpsa { color: #999999; font-size: 11px; border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}
.hlrps a {font-weight:bold; }
.hlrpssumm {}
</style>

  


Option 2: Recent Posts Widget Showing Post Titles Only 

 <div id="hlrpsb">
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.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.blogspot.com/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://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://helplogger.blogspot.com" title="Recent Posts Widget">Helplogger</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#hlrpsb a {color: #0B3861; font-size: 13px;} #rpdr {background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNQaxQ61ht-nXDIvdVbhJm8cBV18kJvWGjGItd4ljW_SHiZq_y3vAu_zUFDV9bJrp9Dy03fTrgRFGpzCUGhbjEsEZcfnkpSW1F6FcLViYBRph5X2ScrmPLVG1jul4s8lz2v3zrqM5PrqYY/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;}
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style> 

Step 4: 

        1.Change 5 (option 1) and 10 (option 2) with the number of posts you want to display. 
        2.Change false to true if you want the posts dates to appear. 
        3.Change 100 (option 1) if you want more characters to be displayed.
        4.To change the color and front size of the links, modify the values in blue (links) and violet (front size)
        5.To change the style of the posts summary, modify the values in green (color) and orange (front size) 
        6.Replace the your-blog text with the name of your blog or if you have a custom domain change all the bolded line with address link in this example: 

http://www.your-site.com/feeds/posts/default....

Step 5: Save your widget and you are ready now.