How To Create Most Popular Post Widget

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

Steps:

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

You just need copy and paste code below in to the widget:

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://hi-template.blogspot.com" target="_blank"><span style="font-size: xx-small;">Popular Posts Widget</span></a>

   
   NOTE: REPLACE everything in YOUR_BLOG_ADDRESS_HERE_WITHOUT_http:// 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 !
   
   Code displays the titles like:
   Post one (18)
   Post two (14) etc.
   



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://hi-template.blogspot.com">Blogger Widgets </a></span>
   

   
   Code displays the titles like:
   Post one (18 comments)
   Post two (14 comments),
   



3. In case if you want to display the popular posts without the number of comments you just need using 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://hi-template.blogspot.com">Blogger Widgets </a></span>