How to Add Simple Recent Post Widget to Blog/BlogSpot

This is a simple recent post widget for blogger which is used to display post title with snippets and it is easy to customize for applying different styles using some css codes for example like change the link or background color etc.

What you can do with this widget

1. Display post title
2. Change no of posts
3. Change the no of characters, snippet etc.
4. Showing post date

Its look like this

How to add Recent Posts Widget to Blogger

Step 1. Log Blogger Dashboard > Layout and click on Add a Gadget link



Step 2. Pop-up window choose HTML/JavaScript



Step 3. Select and copy the below code and paste in HTML/JavaScript box

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://mybloggerdesk.blogspot.com/2013/07/recent-comments-widget-for-blogger.html" target="_blank" title="Grab this Recent comments Widget">Recent Posts Widget</a> by <a href="http://mybloggerdesk.blogspot.com" title="Recent Posts Widget">Mybloggerdesk</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/AVvXsEhqrRQGOlRlv0d3wKAedDJ_jyryDkt1tWWZSZRVDrj5m7cmuyCky5k7CijtBkXN2L3GPMci2ZXoMvzWa0Gj_mulY9vb8X_YiUqgxxs0g2D0PXtLkK5gIiQdc-9984voKIIzTVeK4OiJOcMv/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 With 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://mybloggerdesk.blogspot.com/2013/07/recent-comments-widget-for-blogger.html" title="Grab this Recent comments Widget" target="_blank">Recent Posts Widget</a> by <a href="http://mybloggerdesk.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/AVvXsEhqrRQGOlRlv0d3wKAedDJ_jyryDkt1tWWZSZRVDrj5m7cmuyCky5k7CijtBkXN2L3GPMci2ZXoMvzWa0Gj_mulY9vb8X_YiUqgxxs0g2D0PXtLkK5gIiQdc-9984voKIIzTVeK4OiJOcMv/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>

Optimize

• Change 5 option 1 and, 10 option 2 which is used to display number of posts.
• Change false to true if you want to display posts date
• Change 100 option 1, if you want to display more characters
• To change font size value in blue color
• Replace the your-blog text with the name of your blog

Save and you are done