Most Commented

Recent Posts

Subscribe

  • Subscribe

How to add Popular/Most Visited Posts Widget in Blogger

Posted by mk | June 30, 2009
.

As every blogger wants to show thier popular blog posts (most commented) to their visitors, so here is a very easy method to add a widget containing 10 most commented posts (in order),  anywhere in your blog.

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:

<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=a7d3195528df5e96181a3d2712266226&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 :

<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, use this code

<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=1a1c6e4e6d4f148e3650fda46910e15f&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…

If you have any suggestions and question than feel free to ask me i will response you.

If you enjoyed this post, get free updates by email or RSS for future.

Share and Enjoy:
  • del.icio.us
  • Digg
  • Facebook
  • Google Bookmarks
  • Live
  • Mixx
  • Reddit
  • Yahoo! Buzz
  • StumbleUpon
  • Twitter

Related posts:

  1. Recent Posts Widget with Thumbnails for Blogger
  2. A Smarter Related Posts Widget for Blogger Blogs
  3. Recent Posts Widget with Thumbnails for Websites and Blogs
  4. How to Add Syntax Highlighter To Blogger Blogs
  5. Add Digg Button on Blogger Template

Posted under Blogger Posts, Blogging, blogger | 6 Comments Like this article?

Get Latest Tips delivered to you for "FREE"

RSS Feeds               Email Updates               Twitter Updates

Leave a Comment

If you would like to make a comment, please fill out the form below.

Name (required)

Email (required)

Website

Comments

CommentLuv Enabled
6 Comments so far
  1. Rufor July 14, 2009 7:58 am

    Hello,
    Amazing! Not clear for me, how offen you updating your http://www.teratips.com.
    Have a nice day
    Rufor

  2. mk July 14, 2009 8:04 am

    I start my blog a month ago, and now I am posting 6 post per day, thanks for asking

  3. Eremeeff July 18, 2009 8:52 am

    Super post, Need to mark it on Digg
    Have a nice day

  4. mk July 18, 2009 9:19 am

    thanks for your appreciation, keep reading

  5. inder October 1, 2009 10:07 am

    Good Invention i like your blog
    inder´s last blog ..Meditation for peace, tranquility – HT Inner Voice My ComLuv Profile

  6. Blogger Plug N Play October 6, 2009 6:05 am

    Thank..Please remove B.Stop Link from above code HE HE….
    :)
    Blogger Plug N Play´s last blog ..Image/thumbnail Zoom Effect on Mouse Hover Using jQuery in Blogger Blogspot My ComLuv Profile