Simple Recent Posts Widget for Blogger Prajjwal Rajput Wednesday, June 18, 2014 No Comment

Hello friends I am back again for your blogger blog we're previously shared  Amazing Subscription Widget this very useful widget to increase your social traffic through this widget. This widget contain 3 social networking sites widget such as Facebook Like Button, Twitter Follow Button and Feedburner Email Subscription Widget. But today I am going to share an simple but useful widget for your blogger blog this is recent post widget for blogger blogs this used by many professional bloggers this is very useful widget for drive more traffic of your blog through this widget. This widget helping your visitor to easily navigate your blog's latest posts. The main advantage of this recent posts widget that it will show not only post titles but also show their snippets means this widget shows your blog's beginners words below the posts titles. It is easy to install and customized as your wish you can apply different style on it. If you want to customized and design your self this widget you just need to make some change in is CSS style. You can change its link and background color by yourself and also size and color of text and links. This widget attract more unique visitor, also increase your traffic and decrease your blog bouncing rate.
I provide 2 types of recent posts widget the first widget shows only post title and the second show post title with snippets see below image.

Once you have seen above image let's start to add this recent posts widget in your blogger blog. follow below steps.

• Go to Blogger>>Layout>>Add>>Gadget
• Select HTML/JavaScript Gadget
• Paste the one of the options code below and paste in HTML/JavaScript Gadget

Option I: Recent Posts Widget only Posts Titles

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>
<div id="hlrpsb">
<script src="http://post-titles-only.googlecode.com/svn/recent-posts-with-titles-only.js"></script>
<script>var numposts = 8;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://nextbloggertricks.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://nextbloggertricks.blogspot.com/2014/06/simple-recent-posts-widget-for-blogger.html" target="_blank" title="Grab this Recent Posts Widget">Recent Posts Widget</a> by <a href="http://nextbloggertricks.blogspot.com/" title="Recent Posts Widget">NBT</a></div>
<noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type="text/css">
#hlrpsb a {color: #0B3861; font-size: 14px;} #rpdr {background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhRv31vmw5bXGCl0I53rTEv07VLp9z0iFIrpXgIS_rofTy7bZ5J9ZMEnBuw4u5Xc8KKrYFW1cOJjEiBfQJOq22imow-0N5f0IVAJf807Q1DGUN0IJ0Buh4RfT0gM2EZQQmZ0hodqHBuGat/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></div>

Customization:-

• Replace 8 with number of posts you want to display in it.
• Change false to true if you want the posts dated to appear.
• Replace http://nextbloggertricks.blogspot.com with your blogspot URL.
• Replace #0B3861 with your link color.
• Replace 14px with your font size.

Option II:Recent posts Widget with snippets

  <div id="hlrpsa">
<script src="http://nbt-nextbloggertrick.googlecode.com/svn/recent-posts-with-snippets.js">
</script>
<script>
var numposts = 4;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="http://nextbloggertricks.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://nextbloggertricks.blogspot.com/2014/06/simple-recent-posts-widget-for-blogger.html" target="_blank" title="Grab this Recent Posts Widget">Recent Posts Widget</a> by <a href="http://nextbloggertricks.blogspot.com" title="Recent Posts Widget">NBT</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/AVvXsEjhRv31vmw5bXGCl0I53rTEv07VLp9z0iFIrpXgIS_rofTy7bZ5J9ZMEnBuw4u5Xc8KKrYFW1cOJjEiBfQJOq22imow-0N5f0IVAJf807Q1DGUN0IJ0Buh4RfT0gM2EZQQmZ0hodqHBuGat/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>

 Customization:-

• Replace 4 with number of posts you want to display in it.
• Change false to true if you want the posts dated to appear.
• Replace http://nextbloggertricks.blogspot.com with your blogspot URL.
• Replace #0B3861 with your link color.
• Replace 14px with your font size.

Final Steps:-

1. Click on Save Button and Check your preview that it is properly work on your blogger blog.
2. Finish Enjoy!

Final Words

I hope you can add this widget in your blogger blog properly if not? you're getting error during this 

tutorial so leave a comment for your solution. And don't forget to like our Facebook Page.

Happy Blogging!

Tweet

Tags: Blogger Widget