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.

Comments

  1. But it will not work if blogger user set not public.

    ReplyDelete
  2. @Puri - yes, nobody can pull content from a blog that has limited access. Everybody should respect the privacy of an individual.

    ReplyDelete
  3. Thanks for the tips! Design plays a crucial role for any website's success. I'm glad our dental web designer is skillful in Blogger and most blog platforms.

    ReplyDelete
  4. I'm so dependent on Blogger for my sites. Thanks for sharing this tip. That thumbnail idea can really boost up my site useability.

    Greets website design services consultant

    ReplyDelete
  5. You are most welcome Villette, scorpydesign runs on google's blogger infrastructure for most reliability and scalability. While I was started this design blog/portfolio - I found this is the best platform for running a free and fully customizable cms based website.

    You can also check another post on scorpydesign - limitations of a blogger blog to know what are the constraints when designing and developing on blogger/blogspot platform.

    ReplyDelete
  6. Why is it that the html is not working in my blogger template?

    ReplyDelete
  7. @saturday update : could you please share your blog address and the list you want to add? i could take a look inside it and could tell you what is wrong with it.

    ReplyDelete
  8. Hi Scorpy,

    very fine job ... but your script doesn't work with this line:

    var thumburl=json.feed.entry[i].media$thumbnail.url;

    When i delete this line, your script works well - any idea, how to fix it?

    Another Question: I'm looking vor the meta information about 'Date of Post', 'Author of Post' and 'Number of Comments'. What would be the variables?

    var content=json.feed.entry[i].date.$t; doesn't work. Is there a list of Blogger meta information? It would be very helpfull ...

    Thanks for your support, sorry for my bad English,

    Greetings

    ReplyDelete
  9. @oliver : this script is ok, actually there are 2 forced newlines after line#14 starting with listthis+=, omitting them will make it work perfect.

    the line should be like this...

    listhis+='<li></h2><a href="'+postlink+'"target="scorpydesign">'+posttitle+'</a></h2><img src="'+thumburl+'"align="left"/>'+content+'</li>';

    and Oliver i also created a list of all blogger feed json variables, please check this out, hope you may find your answer there.

    thanks for writing.

    ReplyDelete
  10. Hi Sumit Roy,

    thanks for your fast feedback - you're right, the bug were the 2 forced newlines. Now, Script works fine :=).

    Your list of blogger json variables is very usefull, i'm looking for such a list a long time.

    God bless you and your family,

    Oliver

    ReplyDelete
  11. Pleasure is mine Oliver and thank you very much for your good wishes.

    ReplyDelete
  12. The tips and well-explained tips you provided in this post is very helpful for aspiring Los Angeles web designers like me. Thanks for sharing!

    ReplyDelete
  13. @daniel - it's always been a pleasure for me to share what i discover. best wishes from an Indian graphic and web designer.

    ReplyDelete
  14. Nice codes for blogger with thumbnail this will help be on my blogs. Thanks for the share dude

    ReplyDelete
  15. My Pleasure SEO RESELLER

    ReplyDelete
  16. This is just working great. I love blogger, but when it comes to coding am too lazy. Thanks dude! Lisa All Web Design Info

    ReplyDelete
  17. Mine still says loading... never has worked

    ReplyDelete
  18. According to my web designer in Perth, thumbnails play a huge part in attracting readers to your blog. Humans are very visual creatures.

    ReplyDelete
  19. Dear Sumit,
    Mine is also says loading..........not working.

    ReplyDelete
  20. there are two forced newlines in the listhis+=... line, get rid of them and everything will be fine.

    ReplyDelete
  21. I just tried this code on my wingsoflyra.blogspot.com blog and it
    also says "loading". I delete the lines you stated and still the same. I have yet to actually see it in action as of 8/27/12.

    I didn't see anything in the code that would prevent it from loading on the blog. I'm not a JS programmer so I have spend time reading
    through posts and websites to try and figure it out.

    I was looking for a workable alternative to the well known widget
    over at bloggerplugins that is called 'Recent Posts for Blogger with Thumbnails'. That actually worked incredibly well most of the time but it appears that site isn't working properly, server needs to be re-booted or whatever; it's code isn't being accepted by Blogger over this past weekend and even Blogger is calling it a broken program in the text editor and recommending deleting the gadget. I see the same result on other blogs that also use that specific widget. Blogger can't get the specs for the code reliably on each reload of the blog. It took me about 12 reloads, but I could get it up and going just for that session. I have no idea what happened and why it's broken. It may or may not get fixed.

    This has given me the incentive to re-look at other alternatives.

    This is where I came across your site and I've been looking at other sites but I have yet to find any of them that do as good of a job at a customizable 'Recent Posts with Thumbnails' as the one at bloggerplugins. I think it's really important to have a good contextual and visual component to offer to readers for your postings.

    I have to say I'm a bit surprised that Blogger hasn't actually taken the direct initiative itself to offer a similar widget.

    ReplyDelete
  22. sorry for the inconvenience - i checked my code today - but for some reason it's not working here either. i thought it might be due to any changes on blogger feed structure - but it's same! i ll check again later and tell you about the fix.

    i am not a javascript programmer either - all i learnt is some basics and that's for my own site (scorpydesign) only - and yes initially i got codes from bp, but i remember the credit link was much annoying - ha ha - for that i came up with my own code. for the time being same code is working on my tutorial page - and it's working perfectly - but while checking it on stand alone mode (that's for widgets) there might be some problem - let me check and fix.

    ReplyDelete
  23. This is what am looking for. Is this working for Tumblr? But will try. Ill try this. Thanks!

    ReplyDelete
  24. It's not working when i change
    This
    src="http://www.scorpydesign.com/feeds/posts/default
    ?max-results=8&alt=json&callback=listemall"
    Into
    src="http://blugaamusic.blogspot.com/feeds/posts/default/-/Punjabi?max-results=12&alt=json&callback=listemall"

    ReplyDelete
  25. I truly like to reading your post. Thank you so much for taking the time to share such a nice information. I'll definitely add this great post in my article section.
    website design

    ReplyDelete
  26. Very useful Script, it's as I was looking for my site. thank you for the great work. This is a wonderful theme :).
    Orange county web design

    ReplyDelete
  27. This is an informative post and it is very useful and knowledgeable. therefore, I would like to thank you for the efforts you have made in writing this article.Best Website Design and Development Company in Bangladesh

    ReplyDelete
  28. Very nice post for me . I am a new blogger my blog is
    Computer Education

    ReplyDelete
  29. With that JSON, would I like to take the second image as a thumb?

    ReplyDelete
  30. Creating a website, is just step away with the WebsiteForever site builder. You have a business ….then look no further than WebsiteForever.
    Build Website in One Step

    ReplyDelete
  31. This is actually good to read content of this blog. A is very general and huge knowledgeable platform has been known by this blog. I in reality appreciate this blog to have such kind of educational knowledge. Branding Agency Perth

    ReplyDelete
  32. Thank you, I can do it!
    https://www.nhuygialai.com

    ReplyDelete
  33. Very interesting and informative article. as we provide Website Design Miami at affordable prices.for more info visit our website.

    ReplyDelete
  34. This blog is for those who are looking to find the best for website design. as we provide Ecommerce Web Development in UAE at affordable prices. for more info visit our website.

    ReplyDelete
  35. Excellent read, Positive site, I have read a few of the articles on your website now, and I really like your style.

    ecommerce services provider in india

    ecommerce solutions

    ReplyDelete
  36. Excellent read, Positive site, I have read a few of the articles on your website now, and I really like your style.

    ecommerce services provider in india

    ecommerce catalogue management services

    ReplyDelete
  37. Excellent read, Positive site, I have read a few of the articles on your website now, and I really like your style.

    ecommerce services provider in india

    ecommerce catalogue management services

    ReplyDelete
  38. Excellent read, Positive site, I have read a few of the articles on your website now, and I really like your style.

    ecommerce solutions services

    ecommerce solutions

    ReplyDelete
  39. Your take on the subject is wonderful. I personally fully agree with your opinion. Hope to read more on this topic to increase my knowledge in this field.
    mobile app development company

    ReplyDelete
  40. Thank you for sharing this article. The information you've supplied is superior to that of another blog.

    SEO in Chennai

    ReplyDelete
  41. Excellent Article, I just read and shared it to my friends as it is very useful for everyone. I will learn a lot of new stuff right from this article. You can check our services of

    ecommerce catalogue management services

    ecommerce services provider in india

    ReplyDelete
  42. Excellent Article, I just read and shared it to my friends as it is very useful for everyone. I will learn a lot of new stuff right from this article. You can check our services of

    digital publishing services company

    digital publishing services

    ReplyDelete
  43. web design Chicago is the creation of websites and pages to reflect a company’s brand and information and ensure a user friendly experience. Your blog is very useful to my personal use thanks for share this blog.

    ReplyDelete
  44. Hello Sir, After reviewing a few blog articles on your website, we sincerely appreciate how you blogged. We’ve added it to our list of bookmarked web pages and will be checking back in the near future. Please also visit my website and tell us what you think. Great work hard work you have done I appreciate your work thanks for sharing it.
    nch-drawpad-pro-crack
    wise-game-booster-crack

    ReplyDelete
  45. Interesting blog. It would be great if you can provide more details about it. Thanks you. Need More Information about white label website builder

    white label website builder reseller

    ReplyDelete
  46. If you want to make your hands better in photo editing, learn how to edit photos in Photoshop.

    ReplyDelete

Post a Comment