Thursday, January 11, 2007

Recent posts widget using feed and script generator

Note: A number of inconsitencies have been found as I am editing this post. I will have to do many tests later and reedit this post. Please be patient.

A reader asked for a hack for RECENT POSTS for the New Blogger (formerly beta). Have a look at this list of posts in this blog Natural Remedies. The RECENT POSTS is at the second from the bottom of the right sidebar, just above the "Contact Me" link.

You can generate a Javascript to put into your Page Element to display any number of posts you want, including all. The script generator is at

You will have to enter the feed URL for your blog which will take the form of or or

(substituting "yourblog" with the actual URL of your blog and respond to a number of choices as shown in the screenshot below (click to enlarge):

Feed2js Recent Posts widget generator

If you select the number of items to display to zero, then all the posts will be listed. I have limited it to 8 as showing all posts will give a very long list. Putting "Show item descriptions?" as 0 will give no description, 1 will give full description, and n>1 will display the first n characters of the description. The rest are self-explanatory.

I chosed "1=show full description text". When you are finished, click "Generate Javascript", highlight all the script by clicking inside the script box and press ctrl+A keys (or right-click and select "copy") to copy the script into the clipboard.

It will be good if you are using a browser like FireFox which has tabbed browsing (FireFox is also recommended by Blogger). Then you can open a new tab and log into your Blogger account to get to the Dashboard which will show a list of all your blogs. Click LAYOUT for the relevant blog and click ADD A PAGE ELEMENT in the section you want the "Recent Posts" to be (most likely in the sidebar). Select HTML/Javascript and paste the script from the clipboard into the box. Preferably type in something like "Recent Posts" or something like that in the title, then click "Save Changes". This new Page Element will appear at the top of the section. If you want it elsewhere, hover your mouse cursor over the new Page Element. The cursor will change to a cross. Drag it to wherever you want. In the above case, I dragged it to the second last in the right sidebar section,. Click "Save" at the top of the LAYOUT and if you want to see the result, click VIEW BLOG.

I used
for Natural Remedies and tested adding a new post. When I view the blog after publishing the new post, I could not see the latest post in the list of "Recent Posts", so I tried again with another blog Medical Matters using

and also this time chose "Show title and description"

(the "Recent Posts" is at the second from the bottom of the right sidebar, just above the Profile. I published a new

copy the generated script, go to the Layout of your blog, click "Add a Page Element", then select HTML/Javascript, and paste the script into the pop-up window. In the pop-up for the "Add a Page Element" widget, put in the TITLE "List of Post" so that your list of post will have a visible heading.

Just a little note. Whenever you add a script into a Page Element, it is good to add a comment (not seen on the web) which tells what the script is for. This is so that when you know what the script is for. In my case, I have added the comment
<!-- list of posts hack --> at the top of the script so that I will know what the script is for. Comments are not displayed on the Webs, and are good to document codes so that one will not forget what it is for.

<!-- list of posts hack -->
<script language="JavaScript" src="" type="text/javascript"></script>

<a href="">View RSS feed</a>

UPDATE: This hack does not seem to be working. Using the above feed URL, a List of Post is produced which does not show new posts added. I tried another URL, in this case, The first time, it was added, it showed a list of post. The moment a new post is added, all the post titles disappeared.

UPDATE 23 January 2007: Someone commented in this post about using JSON. Did a Google search for "JSON blogger beta" and found this: JSON on New Blogger and a backlink to Blogger Hack for recent comments and posts. Added what I found in that blog, changed "comment" to "post" and got a list of post but with the title RECENT COMMENTS". Anyone knows how to change that to RECENT POSTS?

UPDATE 23 January 2007: Found another hack at Beautiful Beta: Widget Installation and download page. The result of the hack is at the bottom of the left sidebar at Food, Drinks and Recipe. So now, you have 3 methods of adding List of Recent Posts.



  1. Anonymous1/11/2007

    Thank you for your post.
    I was wondering whether you knew how to get the Archives, in descending order. Meaning I would like Jan 2007, Dec 2006 etc.

    Thank you
    Enhance Life

  2. You can try this site Reverse Archives hack. I haven't gone through it, but I think it is for old (classic) Blogger.

    Peter a.k.a. Enviroman
    Enviroman Says

  3. Anonymous1/12/2007

    Thank you for your prompt response. I went to the link and it had exactly what I was looking for. I will try it out.

    Thanks again
    Enhance Life

  4. Hi, can you show me what I need to do to stop showing just my blogspot home address on my blog? If I click on a particular post, I want the web address to show that post address:) Currently, it continues to show the home blog address:|


  5. Hiya. I tried the Previous Posts-hack and it showed my previous posts fine. When after that I posted a new message that didn´t show up on the Previous Posts-list, like I thought it would :(

    I would like it to go there, to be the first one on the list. I would like to have 10 Previous Posts on the list, which would obviously change a bit everytime I post a new one as the posts would move down every time I post a new one.

    Well you probably know what I mean. Does this hack do that at all or have I done something wrong? I definitely don´t want to change the list manually every time I post!

    Thank you very much.

  6. Hi DD's Mum,

    I am not really intereted in having a Link List in my blogs, but did this for the blog Food, Drinks and Recipe only as a test and demonstration. Looks like I didn't test enough before putting up this post. I tested adding 2 new posts in Food, Drinks and Recipe blog, and they both didn't appear in the Link List. I suspect it may be in the feed URL I used. I will have to do further testing and do an update to this post. Please have patience as I have many other things to do.

    Peter aka Enviroman
    Enviroman Says

  7. Thank you Peter! Sorry, I realised I sounded really impatient earlier, when in reality I appreciate what you do. I´ll keep checking this post for your update :)

  8. Peter,
    I am having the same trouble as you (obviously), so I wonder if there is an easier way I'm not seeing.

    My buddy has a blog, and he said he doesn't know how it does it, he had an old template from the old blogger, an it does it automatically. I looked at his source code, but it's like another language to me...

    maybe it could help??
    Thanks again peter!

    Ryan spies

  9. why dont you try json api for tht. It does not require anything from third party.

  10. Tried googling json blogger beta and found this: json on the new Blogger. However, there were no backlinks shown, so couldn't find whatever is needed to display the list of posts. Why don't you post the actual method or point us the way by giving a link?

  11. Found some backlinks in JSON on the New Blogger. Tried the hacks. Results are reported in the updates to the posts.

    Peter aka Enviroman
    Enviroman Says

  12. even you can put your feed directly to widget. it will show as a list. You can specify how many recent posts to be displayed.

    Look my blog at right panel (above profile)
    Just go to template -> layout -> add element to page -> feed. Thts all...and specify how many posts to display...:)

  13. Hi Jigar,

    Thanks for the tip. Tried it for this blog Good Hobby Ideas. However, I found out that you can only add a maximum of 5 posts with that method. There are lots of people seeking to get a list with more posts than that.

    Peter aka Enviroman
    Enviroman Says

  14. Hi,

    Thank you for all the useful tips you have shared. I have this problem with my website. I noticed that ever since I added the feed into my website, there is this error (404, not found) occured at my webmaster tools saying 'feedreaderson' link which I have not idea how that comes about.

    I wonder if you have any idea about this? Thanks in advance!!

  15. I recently came accross your blog and have been reading along. I thought I would leave my first comment. I dont know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.


  16. wah...ini tips sayangnya a gak trtarik...


Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics