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:

1. 01	<b:includable id='comments' var='post'>

   02	... some contents here .....

   03	<dl id='comments-block'>

   04	<b:loop values='data:post.comments' var='comment'>

   05	<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass'expr:id='data:comment.anchorName'>

   06	<b:if cond='data:comment.favicon'>

   07	<img expr:src='data:comment.favicon' height='16px'style='margin-bottom:-2px;' width='16px'/>

   08

   </b:if>

   09	<a expr:name='data:comment.anchorName'/>

   10	<b:if cond='data:comment.authorUrl'>

   11	<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

   12

   <b:else/>

   13	<data:comment.author/>

   14

   </b:if>

   15	<data:commentPostedByMsg/>

   16

   </dt>

   17	<dd class='comment-body'>

   18	... some more contents here....

   19

   </dd>

   20

   </b:loop>

   21

   </dl>

2. 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>

   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 */ 
   }