How to number comments in Blogger

Communicate better with your readers by improving your comments section.

A while back I wrote a tutorial on how to highlight author comments to help readers spot blog author’s response to their comments.

In this article I will show you how to number comments, in other words to display a number to each comment. Some of the benefits are:

• Having a number attached to each comment greatly helps when you are referring to a specific comment. For example, instead of saying “JohnDoe, similar question has been answered previously to MsBlogger, please scan through the comments ….”  you can pinpoint the comment by saying “JohnDoe, similar question has been answered in comment #44….”.
• This comments numbering hack also gives you access to the comments permalink which can be used for direct linking to the comment. So for the above example, if you were to add the permalink to the text, then clicking it will transfer you straight to comment #44, without the need to scroll down. 

Okay let’s get started.

1. Login to your Blogger account.
2. Go to Dashboard > Design > Edit HTML.
3. Back up your template.
4. Tick the  Expand Widget Templates check box on top right of the HTML window.
5. Look for codes similar to the following lines in your template HTML:

   <b:includable id='comments' var='post'>
   ... some contents here .....
   <dl id='comments-block'>
   <b:loop values='data:post.comments' var='comment'>
   <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
   <b:if cond='data:comment.favicon'>
   <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
   </b:if>
   <a expr:name='data:comment.anchorName'/>
   <b:if cond='data:comment.authorUrl'>
   <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
   <b:else/>
   <data:comment.author/>
   </b:if>
   <data:commentPostedByMsg/>
   </dt>
   <dd class='comment-body'>
   ... some more contents here....
   </dd>
   </b:loop>
   </dl>

6. Insert the highlighted code snippets into the code, as shown below.
   
   • Put first code snippet between the opening <dl> tag (line 3) and <b:loop values='data:post.comments' var='comment'> tag (line 9).
     For Designer Templates, the exact <dl> tag to look for is <dl expr:class='data:post.avatarIndentClass' id='comments-block'>.
   • Put the second code snippet between <data:commentPostedByMsg/> data tag (line 20) and the closing </dt> tag (line 29).

   Be extra careful when inserting the codes because you template may have multiple <dl> tags, </dt> tags or comments-blocks.

   <b:includable id='comments' var='post'>
   ... some contents here .....
   <dl id='comments-block'>
   <!-- set comment counter Start -->
   <script type='text/javascript'>
   var CommentsCounter=0;
   </script>
   <!-- set comment counter End -->
   <b:loop values='data:post.comments' var='comment'>
   <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
   <b:if cond='data:comment.favicon'>
   <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
   </b:if>
   <a expr:name='data:comment.anchorName'/>
   <b:if cond='data:comment.authorUrl'>
   <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
   <b:else/>
   <data:comment.author/>
   </b:if>
   <data:commentPostedByMsg/> 
   <!-- Comment count and display START -->
   <div class='commentnumber' style='font-size: 20px;padding:0 10px;'>
   <a expr:id='&quot;comment-&quot; + data:comment.id' expr:href='&quot;#comment-&quot; + data:comment.id' title='Comment permalink' style='float:right; margin-top:-20px;'>
   <script type='text/javascript'> 
   CommentsCounter=CommentsCounter+1; document.write(CommentsCounter)
   </script>
   </a></div>
   <!-- Comment count and display END -->
   </dt>
   <dd class='comment-body'>
   ... some more contents here....
   </dd>
   </b:loop>
   </dl>

7. To style the number you can add properties to the style attribute in line 22 or you can create a separate element definition in CSS, like this: 

   .commentnumber { 
   /* add styling codes here */ 
   }

   And place the it before ]]></b:skin> line in your HTML.

   To adjust vertical alignment of the number, change the value of margin-top: -12px; in line 23.

 

A bug…and how to fix it

The above counter will only accumulate within a page. The count doesn’t carry over into the next page. Since Blogger only shows up to 200 comments per page, this in effect will limit the displayed count to only 200. The 201st comment will be numbered 1 again (instead of 201) because it lies on a new page! So will the 401st comment and so on.

To fix that, replace  code line 4 to 8 with this one:

<!-- set comment counter Start -->
<script type='text/javascript'>
//<![CDATA[
  var regexpatt = new RegExp('commentPage=([0-9]*)');
  var results = regexpatt.exec( window.location.href );
  if(results == null)
{
    var CommentsCounter = 0;
}
  else
{
    var CommentsCounter = (results[1] - 1) * 200;
}
//]]>
</script>
<!-- set comment counter End -->

If you can’t even see your 200+ comments (let alone the numbering) then read Solving 200+ comments display problem first. After you have that fixed, come back here to continue with the numbering.

Enjoy!

Credit: Vagabundia