Numbering Post Comments

Hi all! Are you ready for a new blog tutorial here at Design It Chic!?! Then let's get started! Without further ado, the topic for today is: numbering post comments. This is one of the most wanted tutorials that we've received requests for. Due to the versatility of it, we decided to finally present you the most updated version of this little trick.



There are many versions to accomplish this, depending on what blog template you use, but basically this tutorial is applicable to the majority of templates. In just a few easy steps, this little tutorial will help the ones who need an accountability of their comments for either their giveaways, contests with prizes, or for simply marketing purposes. Now let's begin this tutorial!

1. As always, before doing any changes, make sure you save your current blog's template by signing in your "Dashboard" and then go to "Design" and select the "Edit HTML" tab and press "Download Full Template".


2. After you saved your blog's current template, make sure you have your comments embedded below posts, and not the pop-up version. If you are not sure of that, you can change this by going to "Settings", click on the "Comments" tab, and third row down the line you will find this option. Make sure you check the "Embedded below post" bullet!


3. Now that we have everything prepared for the trick, let's begin the numbering comments process. You first need to go to "Design" tab then hit the "Edit Html" button. Make sure you check the "Expand Widget Templates" option and look for this piece of code as shown in the picture below, by either scrolling down or simply using the Ctrl + F (for Windows users) or Command + F (for MAC users) combination on your keyboard:

<dl class='comments-block' id='comments-block'>


4. Now that you found the code, paste this code immediately under it, as shown in the picture above:

<script type='text/javascript'>var CommentsCounter=0;</script>

5. Next step is to look for this piece of code:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>


6. And add this code immediately under it as shown in the picture above:

<script type='text/javascript'>var CommentsCounter=0;</script>

7. On the next step you need to look for this piece of code:

<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>


8. And add this attribute to the code immediately before the closing tag of the line, as shown in the picture above:

style='clear: both;'

9. Just a couple more steps and we're there, so now look for this code:

<data:commentPostedByMsg/>


10. And immediately under it add this structure of codes, as shown in the picture above:

<span class='numberingcomments' style='float: right; font-size: 20px;'><a expr:href='data:comment.url' rel='nofollow' style='text-decoration:none' title='Comment Link'><script type='text/javascript'> CommentsCounter=CommentsCounter+1; document.write(CommentsCounter);</script></a></span>

Preview your work, and if there's no parsing mistakes and everything works(even tough you probably won't be able to see the numbering in the preview), you can go ahead and click "save template". And your final result should be something similar to this:


That's it! Hope you guys enjoyed this little tutorial!:)

And don't forget, if you missed anything here at Design It Chic, you can check the Blog Tips button at the top of the page for more tutorials, tips to improve your blog's traffic or other amazing how to's, all presented on different levels, from beginners to the more advanced ones!
Have a great week everybody!