ADVERTISEMENTS
How to Add Popular Posts Widget For Blogger??
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="wonderful-tricks.blogspot.com" 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=1cf38ae68efbe859c4ba1ee239cec099&url=http%3A%2F%2FYOUR_BLOG_ADDRESS_WITHOUT_http://&num=10" type="text/javascript"></script>
<span style="font-size: 80%">Widget by <a href="wonderful-tricks.blogspot.com">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
<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://wonderful-tricks.blogspot.com">Blogger Widgets </a></span>P.S. : Please do not remove the footer link...
0 comments