Benefits
Numeration is the very best way of organizing our comments, as it allows to identify each comment; becoming a great feature for giveaway posts. It also allows you to get the permalink (permanent link) of each comment for future reference, and on top of everything, it is indispensable for design purposes.
Limitations
If our comments are paginated, the counter will reset in each comment page. Comments are automatically paginated if they surpass the 200.
Installation
We first need to install the script. To do this, from our Template Editor, in our Blogger Dashboard, after expanding the widget templates, we must add what is highlighted here below, in the following code:
<b:includable id='comments' var='post'> ........ <dl id='comments-block'> <script type='text/javascript'>var CommentsCounter=0;</script> <b:loop values='data:post.comments' var='comment'> <dt class='comment-author' expr:id='"comment-" + data:comment.id'> <a expr:name='"comment-" + data:comment.id'/> <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/> <span class='numberingcomments'> <a expr:href='data:comment.url' title='Comment Link'> <script type='text/javascript'> CommentsCounter=CommentsCounter+1; document.write(CommentsCounter) </script> </a> </span> </dt> <dd class='comment-body' style='clear: both;'> ....... </dd> </b:loop> </dl>
Customization
In order to style the numbers, we need to copy and customize the following code, right before ]]</b:skin>:
span.numberingcomments {
float: right;
font-size: 20px;
}
Of course, many more CSS properties can be added.
Styling even and odd comments
The original hack proposed by JMiur from Vagabundia includes the option of styling pair et impair (even and odd) comments.
Demo
You can take a look at the result right here.