Add popular posts & Most commented widget to blogger blogspot

Blogger has come up with its own popular post widget (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. You may also add the Blogger stats widget which displays the stats of your blog. 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 most commented widget for blogger, 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!