Recent posts with thumbnails

Show all posts or label specific posts from a blogger blog in a HTML/Javascript widget.

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.