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.

Reference

Vagabundia

More in this category: