How to Add Simple Recent Post Widget to Your Blog

The recent post widget is very important widget to increase site view and engage your users. Many blogger uses our recent post widget. Adding recent post widget increase your traffic and give uesrs a link to recently posted posts and reduce dependency of email marketing.

Feature of Blogger Recent Posts Widget

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

How to Add Recent Posts Widget in Blogger

However follow the below steps to add recent posts widget to blogger at post footer or sidebar.
Step 1
Log in to Blogger Dashboard > Layout > Add Widget.
Step 2
Add HTML/JavaScript Widget from pop-up.
Step 3
Copy the below code and paste in empty space of  HTML/JavaScript Widget.

Recent posts widget with snippets


<div id="asprlh">
<script src="https://raw.githubusercontent.com/taurenidus/blogger/code/recentpostwithsnippet.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="rdpr" style="font-family: arial, sans-serif; font-size: 9px;">
<a href="http://taurenidu.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://taurenidu.blogspot.com" title="Recent Posts Widget">taurenidu</a></div>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
#asprlh a {color: #0B3861; font-size: 13px;} #rdpr {background: url(http://3.bp.blogspot.com/-WM-QlPmHc6Y/T5wJV58qj9I/AAAAAAAACAk/1kULxdNyEyg/s1600/blogger.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rdpr, #rdpr a {color:#808080;}
#asprlh { color: #999999; font-size: 11px; border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}
.hlrps a {font-weight:bold; }
.hlrpssumm {}
</style>

Recent Posts With Post Titles Only


<div id="hlrpsb">
<script style="text/javascript" src="https://raw.githubusercontent.com/taurenidus/blogger/master/recentpostwithtitles.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="rdpr"><a href="http://taurenidu.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://taurenidu.blogspot.com" title="Recent Posts Widget">taurenidu</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#hlrpsb a {color: #0B3861; font-size: 13px;} #rdpr {background: url( http://3.bp.blogspot.com/-WM-QlPmHc6Y/T5wJV58qj9I/AAAAAAAACAk/1kULxdNyEyg/s1600/blogger.png ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rdpr, #rdpr a {color:#808080;}
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style> 
Customiing Recent Posts widget
  • 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, By Default It is 13 Px.
  • Replace the your-blog text with the name of your blog.

Bloggin Tips : Recent Post enhance views of new post and boost serp by internal linking.

    Follow me on

    google+ facebook twitter

    Share Your Mind and Knowledge to Help Others