06 March 2009

Numbering comments

Some people may think numbering comments is simply unnecessary and too difficult to even try it. Is it true? Should you try at least? That’s certainly up to you.
Advantages:

• It is a nice way of differencing/identifying each comment (it’s a great feature for giveaway posts!).
• It allows you to get the permalink of each comment, and this may work for future references (e.g.: “You should read this comment [URL goes here], I found it very interesting.”)
• Indispensible for design purposes.
Possible disadvantages and limitations:

• If you’re lazy, you may find it too long and difficult, though that’s exactly how styling your blog is always going to be. Patience is the clue!
• If your comments are paginated, the counter will reset in each comment page. In Blogger, comments are paginated if they surpass the 200.

Let’s start then:


Go to Layout>Edit HTML in your dashboard. Check the “Expand widget templates” box, then search for this section of code and add what is highlighted:

<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 style='clear: both;' 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' style='float: right; font-size: 20px;'>
<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'>
.......
</dd>

</b:loop>
</dl>

• The font-size can be changed.
• For further styling, in your CSS (the code between <skin> and </skin> in your template), add these lines:

.numberingcomments {
/* add the CSS properties here */
}

And that’s it!

Important:
The hack explained here is only for “numbering comments”. The original hack proposed by JMiur from Vagabundia includes the option of styling pair et impair comments based on the numbering (of course).


No comments:

Post a Comment