How to add popular posts widget for blogger / blogspot

Blogger widget: Blogger has come up with its own popular post widget. This widget was long over due and blogger eventually decided to have their own popular post widget. This widget will allow you to show all the hot topics on you blog on the side bar making it viewable to the visitors and increase the time they spend on your site(This widget is currently only available on blogger drafts [http://draft.blogger.com])

Popular Posts Gadget

Blogger has always lacked such a gadget. There used to be some Yahoo Pipe based widgets, which list out the most commented posts. But these were pretty slow and inefficient. Now Blogger has got this Official Popular Posts Gadget.As the name indicates, the Gadget displays a list of popular posts on your blog. Here is a Screen Shot of the Gadget Options

How to add these Gadgets to your blog?

These Gadgets are not available in your regular Dashboard. So login to Blogger in Draft at http://draft.blogger.com . Now Go to Design > Page Elements and Click on the “Add a Gadget Link” and select Popular posts gadget

One you configure it, you should be all set. Hoping that blogger adds a few features to this widget like thumbnails and limiting the mumber of posts to be shown. You may also add the Blogger stats widget which displays the stats of your blog which was also recently launched by blogger.

For any further queries, feel free to leave a comment and we will get back to you.

For people who still prefer the idea of having older version of popular post widget (most commented) here is the improved and working version of it.

Steps to follow:

Log in to Blogger
Go to Layout -> Add a Gadget -> HTML/JavaScript

Now copy and paste this code in to the widget:

Widget Style #1

<script type=”text/javascript”>
function pipeCallback(obj) {
document.write(‘<ul style=”text-transform: capitalize;”>’);
var i;
for (i = 0; i < obj.count ; i++)
{
var href = “‘” + obj.value.items[i].link + “‘”;
var item = “<li>” + “<a href=” + href + “>” + obj.value.items[i].title + “</a> </li>”;
document.write(item);
}
document.write(‘</ul>’);
}
</script>
<script src=”http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=28a6afad7c6ba1288c1b738277e42385&url=

http%3A%2F%2FYOUR_BLOG_ADDRESS_HERE_WITHOUT_http://&num=10” type=”text/javascript”></script>

<a href=”http://bloggerstop.net” target=”_blank”><span style=”font-size: xx-small;”>Popular Posts Widget</span></a>

NOTE: REPLACE everything in RED color in the code above with your blog’s address without typing http://

The above code displays 10 posts, you can change it by editing the number being displayed in blue!

The above widget code, displays the links/titles like this:

Post one (18)
Post two (14) etc.

If you want to display them like this:

Post one (18 comments)
Post two (14 comments),

then use this code :

Widget Style #2

<script type=”text/javascript”>
function pipeCallback(obj) {
document.write(‘<ol style=”text-transform: capitalize;”>’);
var i;
for (i = 0; i < obj.count ; i++)
{
var href = “‘” + obj.value.items[i].link + “‘”;
var item = “<li>” + “<a href=” + href + “>” + obj.value.items[i].title + “</a> </li>”;
document.write(item);
}
document.write(‘</ol>’);
}
</script>
<script src=”http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=ML4p0UfW3RGgS7iN1JzWFw&url=

http%3A%2F%2FYOUR_BLOG_ADDRESS_WITHOUT_http://&num=10″ type=”text/javascript”></script>
<span style=”font-size: 80%”>Widget by <a href=” http://www.connectindia.co.in “>Blogger Widgets </a></span>

And in case, you want to display the popular posts without the number of comments, use this code:

Widget Style #3

<script type=”text/javascript”>
function pipeCallback(obj) {
document.write(‘<ol style=”text-transform: capitalize;”>’);
var i;
for (i = 0; i < obj.count ; i++)
{
var href = “‘” + obj.value.items[i].link + “‘”;
var item = “<li>” + “<a href=” + href + “>” + obj.value.items[i].title + “</a> </li>”;
document.write(item);
}
document.write(‘</ol>’);
}
</script>
<script src=”http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=097d1b822fc6f356d8376802a911036b&url=

http%3A%2F%2FYOUR_BLOG_ADDRESS_WITHOUT_http://&num=10″ type=”text/javascript”></script>
<span style=”font-size: 80%”>Widget by <a href=”http://www.connectindia.co.in”>Blogger Widgets </a></span>

P.S. : Please do not remove the footer link

Bookmark this site for more blogger tips and tricks, coming soon!