Home » » How To Create Most Popular Post Widget

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>



Share this article :
 
Copyright © 2011. Hi Template - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger