Latest News
Home » All Blogger Tips » Add simple Recent post widget to blogger
web development, SEO services, Web designing

Add simple Recent post widget to blogger

Add simple Recent post widget to blogger
Are you looking for a simple and effective recent post widget for blog. Here I will providing you all with a simple recent post widget which you can customise on your own, as you want. This widget provides you with HTML code in which you can make changes on number of posts, display post title only, post excerpts or snippets as well are available, You can change number of character for post excerpts or snippets.

How to add simple Recent post widget to blogger

  • Go to your blogger dashboard
  • Click on layout —> Add gadget 
  • Select HTML/java script widget
  • Copy the code given below:

For adding post with excerpts 

hlrpsa”>


</script>
<script>
var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
http://your-blog.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts”>
</script></div>

rpdr” style=”font-family: arial, sans-serif; font-size: 9px;”>

<a href=”http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html” target=”_blank” title=”Grab this Recent Posts Widget”>Recent Posts Widget</a> by <a href=”http://helplogger.blogspot.com” title=”Recent Posts Widget”>Helplogger</a></div>
<noscript>Your browser does not support JavaScript!</noscript>
<style type=”text/css”>
#hlrpsa a {color: #0B3861; font-size: 13px;} #rpdr {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;}
#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>

 

For adding only Post heading

hlrpsb”>


10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;
http://your-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts”></script></div>

arial, sans-serif; font-size: 9px;” id=”rpdr”>Recent Posts Widget by Helplogger


<style type=text/css>
#hlrpsb a {color: #0B3861; font-size: 13px;} #rpdr {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;}
#rpdr, #rpdr a {color:#808080;}
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style> 

  • Change 10 with the number of posts you want to display. 
  • Change false to true if you want the posts dates to appear. 
  • Change 100  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 your blog URL 
           http://your-blog.com
  • Then save widget. Done !!! 🙂
Customise it and have fun 🙂 Thanks!!
You can also visit my post for  animated recent post widget.

Originally posted 2013-05-11 06:48:00.

About Vishal Sharma

Hi`i' m +Vishal, a Search Engine optimizer, internet marketer, web designer, affiliate marketer & founder of this blog. I love to learn and share new things. For any query or help you can contact me at any time.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.