+321 123 4567
info@test.com

How To Show Popular Posts (Most Commented Blog Posts)

Wale Adekile

Popular posts are your most commented blog posts. Showing off your popular posts is definitely a way to keep visitors longer, one of the displayed post might have gone into archive but still pretty much relevant. Who knows, some of your visitors might still be in need of it.


Displaying popular posts on your blogspot site needs no special HTML knowledge and you don’t even need to edit your template html manually. Follow the steps below and implement any of the given codes on your blog depending on your taste:

1. Login to your blog and click on “Design”

2. Depending on where you want to display this widget, click on “Add a Gadget”

3. Select HTML/JavaScript


4. To display the posts in this format

My Blog Post A (10 comment)
My Blog Post B (9 comments)
My Blog Post C (8 comments)

<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=7" type="text/javascript"></script>

<a href="https://www.doncaprio.com" target="_blank"><span style="font-size: xx-small;">Popular Posts Widget</span></a>

To display in this format:

My Blog Post A (10)
My Blog Post B (9)
My Blog Post C (8)

<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=7" type="text/javascript"></script>

<a href="https://www.doncaprio.com" target="_blank"><span style="font-size: xx-small;">Popular Posts Widget</span></a>

To display without number of comments like this:

My Blog Post A
My Blog Post B
My Blog Post C


<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=097d1b822fc6f356d8376802a911036b&url=http%3A%2F%2FYOUR_BLOG_ADDRESS_WITHOUT_HTTP://&num=7" type="text/javascript"></script>

<a href="https://www.doncaprio.com" target="_blank"><span style="font-size: xx-small;">Popular Posts Widget</span></a>

5. The number “7” shown in blue determines the number of posts that will be shown. You can change to whatever number you like.

Also, make sure you completely replace the area in the code shown in red with your blog’s address without “http://”!

The widget works perfectly and if it doesn’t, I suggset you take a look at your blog address in the code.


Previous Post
Google Adsense Approval Tips for Blogspot Blogs
Next Post
How to Automatically Publish Blog Rss/Atom Feed To Facebook or Twitter
Wale Adekile
Husband to the world's most beautiful woman and father to two awesome kids. A nerd, obviously; also, a technical business analyst, a web designer who preaches the gospel of WordPress, and a writer. You can check out my published books on Amazon.

Recent Articles