Showing Most Commented or Popular Posts in Blogger

Unfortunately the widget described in this post no longer works. At first it refused to show in Firefox 3.5, but worked perfectly in all other browsers. Then it suddenly stopped working in all the browsers I tried, so I have now replaced it and will post the details as soon as I can.

This is a slightly belated answer to one of my readers who wants to add a Popular Posts widget just as I have in the footer of this blog.

Update: I changed the title to Popular Posts 30-05-2009.

If you scroll to the footer you will only see the Most Commented widget and not Popular Posts. This is because they are the same thing. They work by counting the number of comments your posts receive then listing them with the most popular at the top. What you call it is up to you, but I have also seen them called Favourite Posts, Best Posts and several other names. But Most Commented and Popular Posts are what most people look for and understand.

I was reading Making Money Online 101 (this link no longer works) which is a WordPress blog using the original version of this Blogging Pro template. When I reached the bottom and saw the Most Commented column I decided that I would like it on my blog. So I went in search of the right widget.

I found the code below on Blogger Widgets. This allowed me to display the post names without a count. If you prefer to show the count there are two variations. The first displays the count like this:

Title of post (24)
Title of post (22)

and so on.

The second displays it like this:

Title of post (24 comments)
Title of post (21 comments)

and so on.

To add this to your blog go to Layout>Page Elements and use Add a Gadget to open the HTML/JavaScript and paste the code then enter your URL in place of the red placeholder. DO NOT enter the http:// part of the URL, just www.yourblog.com or yourblog.blogspot.com.

You can choose how many titles you want to display by changing the number in blue just after the URL.

The id number in green determines how the display will look.

1a1c6e4e6d4f148e3650fda46910e15f will display it with no count.
a7d3195528df5e96181a3d2712266226 will display with a count (23)
1cf38ae68efbe859c4ba1ee239cec099 will display like this (23 comments)

In the title field you can enter either Most Commented or Popular Posts, or whatever you prefer to call it.

Then click save and adjust the position of your new widget in the sidebar or wherever you want to place it.

Now a word of caution: you may find that the new widget does not display as you expected. This is due to the fact that most of the widgets which produce lists in your template use unordered lists <ul> as they simply add the latest to the top of the list. Most Commented / Popular Posts has to be an ordered list <ol> as they put the most popular at the top and then work down in order.

All of the templates I have looked at so far do not contain styling for ordered lists as none of them were supplied with any widget that produced them. Therefore the browser uses its built in default styling for ordered lists. To get the display to match your unordered lists you may have to edit or add to your style sheet.

I will write an article on styling lists very soon.

The rest of this article is specific to adding the Most Commented list to the footer of this Blogging Pro template. But first a short list of some other sites with articles on adding Most Commented:

Adding Most Commented to Blogging Pro Footer

First of all this is very similar to The Blank Configure Feed Problem so, if you have not yet read it, it is worth looking at now.

In Layout>Page Elements use Add a Gadget for the footer to open the HTML/JavaScript window and paste and edit your code as above. Then click Save.

Switch to Edit HTML, download the full template for safety’s sake, then expand the widget templates. Scroll to near the bottom of the code and look for this section of code which should be in the FooterBG div:

<b:widget id='HTML8' locked='false' title='Most Commented' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

In the first line id may have a different number after HTML depending on how many other HTML widgets you are using. Also, the title will be whatever you decided on when you filled in the Title box before saving the widget. If you used a different JavaScript code to the one I used you may find a few slight differences but it should be essentially the same.

Highlight everything shown and then cut and paste it into a text file for safe keeping.

Now scroll up a little way until you find the following code section:

</b:widget>
</b:section>

<h3>Recommended Money Makers</h3>
   <ul>
<li><a href="https://chitika.com/mm_overview.php?refid=eblogtemplates" title="Link to Chitika eMiniMalls">Chitika eMiniMalls</a></li>
<li><a href="http://www.widgetbucks.com/home.page?referrer=10252004" title="WidgetBucks">WidgetBucks</a></li>
<li><a href="http://www.text-link-ads.com/?ref=2164" title="Link to Text Link Ads">Text Link Ads</a></li>
<li><a href="http://www.shoppingads.com/refer_b2ca9b956a2a7e7bbfc0" title="Link to AuctionAds">AuctionAds</a></li>
<li><a href="http://affiliate-program.amazon.com/gp/associates/join?tag=blogtemplates-20" title="Link to Amazon Associates">Amazon Associates</a></li>
<li><script type="text/javascript">
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></li>
    </ul>
</div>

</div>
</div>

Highlight all the code highlighted above then do not delete it but cut it, paste it into a text file and save it in case you decide to restore it someday.

Now go to the text file where you saved the widget code and copy it. Open up a space between the </b:widget> and </b:section> immediately above the code highlighted above and paste your widget code there so that it looks like this:

</b:widget>
<b:widget id='HTML8' locked='false' title='Most Commented' type='HTML'>
<b:includable id='main'>
<div class='MostCommented'>

<b:if cond='data:title != ""'>
<h3 class='title'><data:title/></h3>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
<div class='FooterBG'>
<div class='Footer'>

It will now be directly below your Recent Comments code. Finally add the two lines in red and remember to change both <h2>s to <h3> as highlighted.

Click Preview just to check there are no errors then if all is well save the template.

Now a slight adjustment to the CSS to get rid of the margin on the left of the Most Commented / Popular Posts list.

Look for the following styles in the head section of the template:

/* Extra Footer */
.ExtraBG{width:100%; float:left; background:#039; padding:25px 0px}
.Extra{width:900px; position:relative; clear:left; margin:0 auto}
.Extra h3{padding:0px 0px 10px 0px; margin:0px 0px 10px 0px; color:#fff; font-size:17px; letter-spacing:-1px; border-bottom:dashed 1px #2658ad}
.Extra ul, .Extra ol{padding:0px; margin:0px}

Add the code in red to the CSS, not forgetting the comma and that will close the margin to match Recent Posts and Recent Comments.

A final word. As you know it is not possible to have more than five feed items showing when you use Blogger’s feed widget. At first I thought that I would have to limit Most Commented to five items as well. Then I noticed that most of the entries in Recent Comments take two lines. So, leaving the default number of feeds at ten in Most Commented will not result in a list that is much longer than the other two.

I hope that it works well for you.