The main advantage on this Recent Posts widget is that it will show not only post titles but also post excerpts or snippets and it's easy to customize/ apply different style on it. To style it into your own design, you just have to modify the CSS style - you can change the link or background color, the size and color of text/links.

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

See the screenshot below:

How to add Recent Posts Widget to Blogger:

Step 1. Log in to your Blogger Dashboard, then go to Layout and click on Add a Gadget link

 

Step 2. From the pop-up window, scroll down and choose HTML/JavaScript

Step 3. Select & Copy the code from one of the options below and paste it into the new HTML/JavaScript:

Option 1: Recent posts widget with snippets

<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://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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCbkURxjRngIag5ZOll1cWwAN21ojGqarb35Pzioz9tKUotdAMQvs9zAZ-iKoKuEoPfLDUGNKOztyXW4XzaIOwEnA3PQ5tP0_b-0PR1wwklqvyCupWpZ6yymqCWEgnzbBXB3V5DlrRDTgd/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://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://helplogger.blogspot.com" title="Recent Posts Widget">Helplogger</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/AVvXsEjCbkURxjRngIag5ZOll1cWwAN21ojGqarb35Pzioz9tKUotdAMQvs9zAZ-iKoKuEoPfLDUGNKOztyXW4XzaIOwEnA3PQ5tP0_b-0PR1wwklqvyCupWpZ6yymqCWEgnzbBXB3V5DlrRDTgd/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>

Step 4.

•     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....

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

If you need any help, leave a comment below.
And if you liked this post, please consider sharing it. Thanks.

 

By default Blogger doesn't provide any recent posts or list of posts tagged under certain labels widget. There are many third party widgets - but personally I don't like using them as most of them are not much customizable to fit into my Blogger template. So I tried to figure-out how things happen and learn't a bit Javascript and Blogger JSON api. They are all needed to implement something like Popular Posts widget or Blogroll widget for Blogger.

Here in this small code I am going to show you how you can list your recent posts or posts related to a specific label - even you can extend this script to show posts with more than one labels like posts tagged under 'Javascript' and 'Tutorial'. Let's see how this can be done.

Obviously we are going to put everything inside a HTML/Javascript widget. From your Blogger layout add a HTML/Javascript widget where you want the list of posts should be displayed. Then inside the code editor paste the following code.

<div id='listemup'>Loading...</div>
<script type="text/javascript">
function listemall(json){
 var listhis='<ul>';
 for(var i=0; i<json.feed.entry.length; i++){
  var posttitle=json.feed.entry[i].title.$t;
  var thumburl=json.feed.entry[i].media$thumbnail.url;
  var content=json.feed.entry[i].content.$t;
  for(var k = 0; k < json.feed.entry[i].link.length; k++){
   if (json.feed.entry[i].link[k].rel == 'alternate') {
    var postlink = json.feed.entry[i].link[k].href;
   }
  }
  listhis+='<li></h2><a href="'+postlink+'" target="scorpydesign">'+posttitle+'</a></h2><img src="'+thumburl+'"  align="left"/>'+content+'</li>';
 }
 listhis+='</ul>';
 document.getElementById('listemup').innerHTML=listhis;
}
</script>
<script src="http://www.scorpydesign.com/feeds/posts/default
?max-results=8&alt=json&callback=listemall"></script>

From the code above replace www.scorpydesign.com with your blog address and replace 8 from max-results=8 with number of posts you want to show. If you want to show all posts of your Blogger blog on something like an index page, then you can set max-results with a large number like 500 - if your post count is less than 500.

Note : If you don't insert jump-breaks (read more) in your posts, then you might end up showing full posts in this widget. To prevent it you may try replacing 'default' with 'summary'

It is always better to insert jump-breaks in Blogger posts if you are showing large number of posts on the home page of your blog, and it is also healthy if you have long posts.

You can also customize this script to show label specific posts in your recent posts widget. Feed for posts with specific labels in a Blogger blog is requested like this -

blog-address/feeds/posts/default/-/label1/label2

for example, feed for all posts tagged under Photoshop and Tutorial in scorpydesign is retrieved from

http://www.scorpydesign.com/feeds/posts/default/-/Photoshop/Tutorial

Now we can implement this technique for this widget code replacing the normal feed with this label specific feed. Replacing the <script> tag for Blogger JSON request in the main widget code with the code below will show recent Photoshop, Tutorial posts from scorpydesign.

<script src="http://www.scorpydesign.com/feeds/posts/default/-/Photoshop/Tutorial?max-results=8&alt=json&callback=listemall"></script>

If you have space within your label names, you will have to URL encode it with %20F - for example if you have a certain label with name 'Facebook Page Tutorial' then you will need to pass this label to blogger JSON feed api like 'Facebook%20FPage%20FTutorial'

There is also many possibilities to customize the output of this script. The JSON data returned from Blogger contains other meta information like categories, author, timestamp etc. So you can develop this script to show when a post was published, who is the author of a post (if you are writting to a group blog) and labels related to a post etc.

While redesigning my design studio website on Blogger, I found many nifty tricks and techniques and I would like to thank members of Blogger Help Forum for the wonderful discussions which made me more curious towards learning learning about Blogger JSON feed and Javascript. If you find this tutorial and this script useful, won't you share what you are doing with it? Please comment below and tell me what do you think about it.