Popular Posts Widgets For Blogger - New and Working

The previous widget for showing Popular posts (most commented), has been stopped working, so here's a new code for the widget.

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.bloggerstop.net">Blogger Widgets </a></span>

And in case, you want to display the popular posts without the number of comments (as requested by Ben), 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.bloggerstop.net">Blogger Widgets </a></span>

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

Blog Admin : Divya Sai

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Posts