Easy to Add Recent Posts Widget for blogger blogs

One of the best way to improve your page hits and Alexa ranking online by making readers to stick to your blogger blog. By adding Recent posts widget to your blogger blog compose readers to check more articles.

Here BlogTariff explains about to add recent posts widget along with the snippets on your blog.

What are the advantage with this widget

Increase page views by displaying Post titles

Increase readers to check more by displaying number of posts

Attracts readers by showing snippets

Let’s start here How to add Recent posts widget to blogger blog

Sign in to your blogger blog

Click on “Design – Page elements” Tab

Click on “Add a Gadget” and select “HTML/Javascript

Now add the below code

 <div id="blogtariff">
<script src="http://blogtariff.webs.com/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://www.blogtariff.com/2012/05/easy-to-add-recent-posts-widget-for.html" target="_blank" title="Grab this Recent Posts Widget">Recent Posts Widget</a> by <a href="http://blogtariff.com" title="Recent Posts Widget">BlogTariff</a></div>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
#rpdr {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNUvS0cOdKGiQBx4QKzDLIFB3i3zXy5GA4azWNsTvlM5IvbxrQ1Qo2zxUC1CwaAMsewpKaLLqLg1HRl37p1gVZD9IdSppuXjgcx-nUZCTjnXkJzplnt-w5FL3mA0U0SeOS26ntXcc2GH0/s300/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;}
#blogtariff { border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}
.hlrps a {font-weight:bold; }
.hlrpssumm {}
</style>

Code for Recent posts widget to display only Post titles

<div id="blogtariff">
<script style="text/javascript" src="http://blogtariff.webs.com/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://www.blogtariff.com/2012/05/easy-to-add-recent-posts-widget-for.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://blogtariff.com" title="Recent Posts Widget">BlogTariff</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/AVvXsEhNUvS0cOdKGiQBx4QKzDLIFB3i3zXy5GA4azWNsTvlM5IvbxrQ1Qo2zxUC1CwaAMsewpKaLLqLg1HRl37p1gVZD9IdSppuXjgcx-nUZCTjnXkJzplnt-w5FL3mA0U0SeOS26ntXcc2GH0/s300/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;}
#blogtariff { }
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>

Change your preferred number of posts to display with 5 and 10. If you intend to display the date along with posts change from false to true. If you want to display more characters then change number 100.

Change “Your blog” with your blogger blog name as show below.

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

After successful pasting and changing necessary correction “Save the Widget” and “Save the Template”. Preview your blogger blog template how recent posts widget looks.

Please leaver your words below, we always respects your comments.