[Blogger Tutorial] Numbering Comments

This is a question that 99.7% of new or growing bloggers ask.  Some of the more techie bloggers are able to figure this trick out for themselves.  But alas, not all of us grew up thinking that learning HTML would be a killer second language.  So here’s a tutorial to help you out!

ALWAYS BACK UP YOUR TEMPLATE BEFORE MAKING CHANGES.  I beg of you! Even if this seems easy, you have no idea how many people e-mail me saying “Help! I forgot to save my code! Look at my blog! It’s RUINED!” just because they mistyped one little thing or deleted an extra line.  Save yourself the panic attack!  Usually, I open a Word Doc and copy and paste it there.  That way, I know I have the unmarred code in a totally separate place!

 

1. Click the Design link on the Blogger Dashboard, then click Edit HTML Code
2. Make sure you click the box that says Expand Widget Templates that’s right above the text box
3. Back up your code before making changes
4. Press Ctrl + F and search for the following code:

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

5. Directly above that line, paste this:

   <!-- COMMENT NUMBER START --><<script type='text/javascript'>var CommentsCounter=0;</script></span>

6. Now, press Ctrl + F and search for this code:

   <data:commentPostedByMsg/>

7. Right below that line, paste the following code:

   <!-- COMMENT NUMBER START --> <span class='comm-num'> <a expr:href='data:comment.url' title='Comment Link'> <script type='text/javascript'> CommentsCounter=CommentsCounter+1; document.write(CommentsCounter) </script></span> </a> </span> <!-- COMMENT NUMBER END -->

8. Save and done!  To make sure it’s worked, view one of your posts that has comments, and viola! Awesome numbers hanging out on the right of every comment. Hooray!

 

As usual, feel free to comment or e-mail with questions or for help. Please keep in mind that if you’ve previously had someone work on your HTML or you have done it yourself, the coding might not be the same, so it’s even more important to save your HTML beforehand!

 

Technorati Tags: Blogger,Tutorial,Blogger Tutorial,Comments,Numbering,Blogging,Tips