Make Recent Post Widget on Blog

Hi Blogger Tutorials friend.. Now, I will give you a tips to Make Recent Post Widget on Blog. This will allow visitors to find the last article that you published. This is an effective way to make visitors stay on our blog and also to beautify the look of our blog. Many people said that this is one way of seo techniques to optimize your blog in search engines.

What you can do with this widget:

• display post titles only
• change the number of posts
• change the number of characters of the post snippet/excerpt
• show the post dates

This is a simple way. Please follow my instructions below:
First, login to your blogger account, and then go to layout > add a gadget > java script/HTML.
Then, Select & Copy the code from one of the options below and paste it into the new HTML/JavaScript:

<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://ihowmore.blogspot.ru/2013/03/make-recent-post-widget-on-blog.html" target="_blank" title="Grab this Recent Posts Widget">Recent Posts Widget</a> by <a href="http://ihowmore.blogspot.com" title="Recent Posts Widget">iHowMore</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/AVvXsEhzcVIevaBPNAuIjoAjiw_l5ipAoPrrxdu3KrTZptT4-lMjbOQ7rMa2NiHB672bDhtbPymgn0ZUiRfZ5J1KZYJpBNx1jsKTxRNRovHVWU3a_pcPJUd3vcOSpxvkOkmwULgUYRagGg5Movya/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://ihowmore.blogspot.ru/2013/03/make-recent-post-widget-on-blog.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://ihowmore.blogspot.com" title="Recent Posts Widget">iHowMore</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/AVvXsEhzcVIevaBPNAuIjoAjiw_l5ipAoPrrxdu3KrTZptT4-lMjbOQ7rMa2NiHB672bDhtbPymgn0ZUiRfZ5J1KZYJpBNx1jsKTxRNRovHVWU3a_pcPJUd3vcOSpxvkOkmwULgUYRagGg5Movya/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>

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

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

Save your widget. And that's it! Enjoy!

Well, blogger tutorials friend. it's the simple way to Make Recent Post Widget on Blog.
If you need any help, leave a comment below.
And if you liked this post, please consider sharing it. Thanks vor visited my blog.