Popular Posts Widget For Blogger Blogs

On 06.19.09, In Tutorial, by Template Tutorial

In the previous post, I wrote about Sharing widget button for blogs, and then in this post, I would like to write about Popular Post Widget that can be used for Blogger Blogs. This topic may have been discussed by many blogger masters, but I hope it will be useful for you.

If you want to display your popular posts, or commented by many visitors, you have to install a widget. This widget is called Popular posts widget or Most Commented Posts. You can install this widget with two ways, manually and or automatically. If you want to install Popular posts widget manually, you can follow these steps:

Login to blogger with your ID, on the Dashboard, click Layout of the blog you want to place the popular post widget.
After you click Layout, make sure you are in the Page Element, now add a new gadget on the sidebar or on the footer of your blog by click on Add a Gadjet.
In the dialog box of Add a Gadget, please select HTML/JavaScript by give a click on the text or the sigh plus (+). After the field of Configuration HTML/JavaScript appears, copy the JavaScript below:

<script type=”text/javascript”> function pipeCallback(obj) { document.write(‘<ul style=”text-transform: capitalize;”>’); var i; 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=3feb32d97078cfa0e29c57c8a3468f0f&blogurl=http://yourblogname.com&numpost=5” type=”text/javascript”></script>
If the code above copied, paste into the field or text area of Configuration HTML/JavaScript. For the Title, you can fill out with Popular Posts or Most Commented Post or whatever you like, then don’t forget to click Save.
Done

Remarks:

<mce:script mce_src=”http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=3feb32d97078cfa0e29c57c8a3468f0f&blogurl=http://yourblogname.com&numpost=5″ type=”text/javascript”></mce:script>

Replace the URL with your blog URL and the number 10 at code m&num=5 shows the max number of your popular posts that would be displayed. If you want more or less posts, just adjust the number, as you desire e.g. 15, 20, 5, 3, or anything you like.

I think the manually installation of Popular posts widget is enough, and now how about the automatic way?

To install the automatic widget, you can visit and follow the guide from Blogger Master Amanda here.

However, the widget by Amanda can be manually installed on your blog. The steps are like above as I mention. The JavaScript code would be as follow:

<mce: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> ’); } // –></mce:script> <mce:script mce_src=”http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=1cf38ae68efbe859c4ba1ee239cec099&url=http%3A%2F%2FYourblogname.com&num=10″ type=”text/javascript”></mce:script> Widget by <a href=”http://www.bloggerbuster.com” mce_href=”http://www.bloggerbuster.com”>Blogger Buster </a>script>

Finally, this post is finished, I hope that I deliver to you today will be useful for you. Good luck

Update: The code/script from amanda was not worked.

Template Tutorial

Template Tutorial is a site that contains about website information, download softwares, blogging tutorial, wordpress tutorial, blogger templates and wordpress themes.

Visit Authors Website