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

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.
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.<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>
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/label2for example, feed for all posts tagged under Photoshop and Tutorial in scorpydesign is retrieved from
http://www.scorpydesign.com/feeds/posts/default/-/Photoshop/TutorialNow 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.
But it will not work if blogger user set not public.
ReplyDelete@Puri - yes, nobody can pull content from a blog that has limited access. Everybody should respect the privacy of an individual.
ReplyDeleteThanks 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.
ReplyDeleteI'm so dependent on Blogger for my sites. Thanks for sharing this tip. That thumbnail idea can really boost up my site useability.
ReplyDeleteGreets website design services consultant
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.
ReplyDeleteYou 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.
Why is it that the html is not working in my blogger template?
ReplyDelete@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.
ReplyDeleteHi Scorpy,
ReplyDeletevery 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
@oliver : this script is ok, actually there are 2 forced newlines after line#14 starting with listthis+=, omitting them will make it work perfect.
ReplyDeletethe 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.
Hi Sumit Roy,
ReplyDeletethanks 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
Pleasure is mine Oliver and thank you very much for your good wishes.
ReplyDeleteThe 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@daniel - it's always been a pleasure for me to share what i discover. best wishes from an Indian graphic and web designer.
ReplyDeleteNice codes for blogger with thumbnail this will help be on my blogs. Thanks for the share dude
ReplyDeleteMy Pleasure SEO RESELLER
ReplyDeleteThis is just working great. I love blogger, but when it comes to coding am too lazy. Thanks dude! Lisa All Web Design Info
ReplyDeleteMine still says loading... never has worked
ReplyDeleteAccording to my web designer in Perth, thumbnails play a huge part in attracting readers to your blog. Humans are very visual creatures.
ReplyDeleteDear Sumit,
ReplyDeleteMine is also says loading..........not working.
there are two forced newlines in the listhis+=... line, get rid of them and everything will be fine.
ReplyDeleteI just tried this code on my wingsoflyra.blogspot.com blog and it
ReplyDeletealso 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.
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.
ReplyDeletei 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.
This is what am looking for. Is this working for Tumblr? But will try. Ill try this. Thanks!
ReplyDeleteIt's not working when i change
ReplyDeleteThis
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"
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.
ReplyDeletewebsite design
Very useful Script, it's as I was looking for my site. thank you for the great work. This is a wonderful theme :).
ReplyDeleteOrange county web design
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
ReplyDeleteVery nice post for me . I am a new blogger my blog is
ReplyDeleteComputer Education
Nice article you have posted here.Thank you for sharing this information. Share more like this.
ReplyDeletephp training in tambaram
PHP Training in T nagar
Android Training in T Nagar
Selenium Training in Anna Nagar
Software Testing Training in Chennai
SEO Training in OMR
Selenium Training in Velachery
Software Testing Training in OMR
Web Designing Course in porur
graphic design courses in porur
Excellent post, thanks for this. I gathered lots of information from this and I am happy about it. Do share more updates.
ReplyDeletePHP Training in Chennai
Best PHP Training Institute in Chennai
PHP Institute in Chennai
Angular Training in Chennai
Web Designing Training in Chennai
Salesforce Training in Chennai
Tally course in Chennai
Machine Learning course in Chennai
PHP Training in Velachery
PHP and MYSQL Interview Questions
With that JSON, would I like to take the second image as a thumb?
ReplyDeleteCreating a website, is just step away with the WebsiteForever site builder. You have a business ….then look no further than WebsiteForever.
ReplyDeleteBuild Website in One Step
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
ReplyDeleteThank you, I can do it!
ReplyDeletehttps://www.nhuygialai.com
Very interesting and informative article. as we provide Website Design Miami at affordable prices.for more info visit our website.
ReplyDeleteThis 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.
ReplyDeletenice
ReplyDelete