Show Recent Posts Widget In BlogSpot / Blogger Blogs

As you can see, most of the widgets explained in this blog are quite easy to understand and implement, so for this widget too, I have decided to explain the easier method.
I you want to display a widget, showing the latest posts of your blog, with a brief summary in the sidebar, or anywhere in the blog, then follow these steps to create it within minutes.





If you already have burnt your blog's feed with feedburner, then it' fine , if not then follow these 3 steps first:

1. Go to FeedBurner.com
2. Enter the address/url of your blog in the space provided and click on Next.


3. Now select the second radio button, and click on Next. And then click on Activate Feed, Now you can "Skip To Feed Management"


Those familiar with Feedburner, log in to it.
Then click on Publicize tab at the top, then click on the BuzzBoost Link in the left side bar links.


Now select the appropriate settings, and then click on "Activate" button, and then copy the HTML code in to your website. You can see the recent posts widget in my blog at the bottom left !

*Update:
If you are facing any problems in the widget described above, then use this one:

Log in to Blogger, go to Layout and click on "Add a Gadget", and select it as "HTML/JavaScript type".
Now add this code in to the widget:
<script>
function rp(json) {
document.write('<ul>');

for (var i = 0; i < numposts; i++) {
document.write('<li>');
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;

if (i == json.feed.entry.length) break;

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}

posttitle = posttitle.link(posturl);
var readmorelink = "(more)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";

if ("content" in entry) {
var postcontent = entry.content.$t;
} else if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else
var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
document.write(posttitle);

if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);

if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...' + readmorelink);
}
}
document.write('</li>');
}
document.write('</ul>');

}
</script>

<script>
var numposts = 7;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;

</script>

<script src="http://YOUR_BLOG.BLOGSPOT.COM/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script><br/><span style="font-size: x-small;"><a href="http://bloggerstop.net">Blogger Widgets</a></span>

The code in blue is what you have to change (replace the entire code in blue with your blog's address)
And the code in red, is optional to change.

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

35 comments

Write comments
January 03, 2009 6:06 AM delete

nice... all the other hacked versions on several blogs all gave me some kind of unwanted behavior or bug..

I love how feedburner had this integrated right in there

w00t

Reply
avatar
February 06, 2009 1:23 PM delete

I have a problem with this gadget. When I post my article in digg.com it appears as new article in my Recent posts gadget. The article is shown also in my feed. Could you tell me where might be the problem. 10x

Reply
avatar
February 07, 2009 2:51 AM delete

Hi Ivaylo
I think there might be some problem with the feed link you have submitted to feedburner, anyways I have added an update in the post above, which now is completely independent of feedburner, so you can easily use this new widget, with same features as provided by feedburner !

Reply
avatar
February 08, 2009 2:34 AM delete

Hi, thank you for the update. It works pretty nice. There is only one thing - an extra bullet below. Maybe it is because of another problem that I have:
Please see the Popular articles widget. There is an article "123_3127 (1 comments)" which I deleted days ago when I was still experimenting with the blog features. Is there any way to remove it?
10x again.

Reply
avatar
February 08, 2009 2:52 AM delete

Don't worry for that article, may be the post is still there in your feed, so when you you'll write more articles, then this will be replaced with them !

And your blog's link is being displayed as title too, so u can change it as "Idea Share", in the settings section of your blog !

Reply
avatar
February 08, 2009 2:15 PM delete

Thank you. :)
You mean to go settings menu -> basic -> and to change the title Idea Share to "Idea Share" or I didn't get the idea?

Reply
avatar
February 08, 2009 2:30 PM delete

Well if the title is already "Idea Share", in your settings menu, then
you have to go to "Layout"->"Edit html", then in the code find this:

<title>http://www.ideashare.info</title>

and change it to:
<title>Idea Share</title>

Title should not be the same as your blog link, so this is quite necessary, if you want to optimize your blog for search engines !

Reply
avatar
February 08, 2009 2:38 PM delete

Yes I've done this. 10x again. You were quite helpful!

Reply
avatar
February 25, 2009 2:49 PM delete

Hi! I am using the code you have provided above because the feed from Feedburner seems not updating lately. I have posted several articles but the Recent Posts does not show these new titles. So I am now using your code.

The problem is, loading is slow. Did I do something wrong?

Reply
avatar
February 25, 2009 3:12 PM delete

Well, the widget may be quite slow as it uses javascript, but actually it shouldn't be very slow, you can compare it with the widget's loading time in my blog (at bottom).
As you are using other js widgets too, like adverts etc. so overall loading time has increased more !

Reply
avatar
March 09, 2009 11:38 AM delete

http://bloggertinker.blogspot.com/2009/03/how-to-put-recent-postsrecent-articles.html

This is the simplest and easiest way to add a Recent Posts/Recent Articles widget in your blog. Unlike other blogs, the tutorial here uses the standard Blogger Feed widget to make the Recent Posts/Recent Articles widget. And I am 100% sure your Recent Posts/Recent Articles widget will work.

Nice Tutorial though... ^_^

Reply
avatar
March 09, 2009 12:01 PM delete

By simply adding feed links in widgets, you only get 5 recent posts and that too - without the option to show any summary with the titles, BUT by any of the two methods described above, you have the choice to show more than 5 posts and also you can show summaries with titles !
Thanks for visiting and commenting...

Regards
Sai

Reply
avatar
March 26, 2009 1:28 PM delete

Really Thanks alot for sharing these great ideas!

Reply
avatar
May 22, 2009 3:13 AM delete

hi thank you for your html code , it really worked ! [:)]

Reply
avatar
July 13, 2009 9:28 AM delete

Thanks, the gadget is great, it is better than the Google Archive

Reply
avatar
July 16, 2009 8:48 AM delete

I have find a quick and easy to install and customize Recent Post Widget with thumbnails. You can install it in minute with hassle-free complicated manual code installation.

You may look at this link for more information : http://www.engadgeteer.com/2009/07/recent-posts-widget-with-thumbnails.html

Reply
avatar
September 01, 2009 4:43 PM delete

:) Thank you very much, if I want creat older related posts and newer related posts then what should I do?

Reply
avatar
Mia
September 09, 2009 3:06 AM delete

I dont know why , but this is the only javascript that worked on my blog . Thanks Divya :)

Reply
avatar
September 09, 2009 8:49 AM delete

Glad to know that Mia....

You have a wonderful blog !

Reply
avatar
October 16, 2009 4:20 AM delete

I have find a quick and easy to install and customize Recent Post Widget with thumbnails. You can install it in minute with hassle-free complicated manual code installation.

You may look at this link for more information : http://www.techgeeze.com/2009/07/recent-posts-widget-with-thumbnails.html

Reply
avatar
January 22, 2010 3:30 AM delete

Hi, I have use this script an it is works.

This is my blog where i put this script RichHomeWorker.Blogspot.Com

Thanks :D

Reply
avatar
February 21, 2010 9:24 AM delete

Great article. Do let me know if you have any article on all the functions to use in feedburner. This one was very helpful. Thanks Divya :)

Lina.

Reply
avatar
February 21, 2010 10:41 AM delete

Yeah Lina, there's a cool way to display live feed on simple IMAGES, here's the tutorial I hope u'll like it:
Feed Banners For Blogger Blogs

Reply
avatar
March 20, 2010 5:37 AM delete

thanks, unique posts i've ever seen in the search engine...
thumbs up ;)
do have a post on how to make ur blog faster reload even they have more widgets in site...
because my site hard to reload..do u have any recommendation for it...
thank you so much

Reply
avatar
October 25, 2010 7:47 PM delete

Is there any way to display the links to posts that are on the next page of my blog in a gadget?

Reply
avatar
January 08, 2011 2:48 PM delete

how did u add color to the recent post.my blog has black background so text is not visible

Reply
avatar
May 21, 2011 1:18 PM delete

Add target="_blank" to this code and you're my hero. If you can do this please leave me a message back. Thanks

Reply
avatar
June 09, 2011 6:22 AM delete

Hi thank, it works for me,..

Reply
avatar
August 05, 2011 11:59 PM delete

That a very nice article. I get complete information about the BlogSpot / Blogger Blogs from this article. So thank you very much to posting me such a wonderful article.

Reply
avatar
November 12, 2011 8:26 AM delete

bài viết của bạn rất hay,cảm ơn nhé^^http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif

Reply
avatar
El
December 22, 2011 9:19 AM delete

Thank you, it worked on my site! http://accountingarchives.blogspot.com

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon