Saturday, May 28, 2011

Tutorial: Numbering comments in Blogger

I have done this on my regular blog, and  few people have commented asking me how I did it... Well here you go! 

This is especially helpful if you are hosting a giveaway and need to be able to find certain comments quickly! Another great asset is that you can click on the numbers to display that comment! For example, I clicked on comment number 20, and it gave me this link. When you click on it, it will take you directly to comment #20! How fabulous is that?

Here is what your comments will look like when you are finished:

OK! Let's get started!

Before you do anything! Go to Dashboard>{under the blog you would like to add numbered comments to}Settings>Comments> and under 'Comment Form Placement', select 'Embedded Below Post'. This is very important! This whole tutorial will not work if you do not do this!

OK! Now that that's done, let's move on! Go to Dashboard>Layout>Edit HTML. I would highly suggest that you download a copy of your blog template before starting!!! For those of you who are confident in your HTML knowledge and can easily go back and delete the coding you will be adding, you don't have to do this, but it is a step I would encourage you to take! 

Once you have downloaded a copy of your HTML, make sure to tick the box 'Expand Widget Template'. Then click CTRL+f to activate the search bar. In the search bar, paste the following code:
<b:loop values='data:post.comments' var='comment'>

Once you have found that code, add this code right above the code you just found {all that b:loop stuff :)}:
<script type='text/javascript'>var CommentsCounter=0;</script>
Great! Now, put this next code into the search bar:
 Once that shows up, paste this code directly underneath:
<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)></a></span>
 Now you're done! Save your blog, don't preview, because preview won't let you see your fabulous new numbered comments in action! :D 

Also, don't worry if you don't get it the first time! I had to do this twice to get it! So just try it again once more, and if you STILL don't get it, please feel free to e-mail me and ask! I would be happy to answer all your questions, and even install this in your blog... free of charge!

Let me know if you do this and it works!


Beben Koben said...

we can use it too <ol>
but for first step, we have to backup full template ;)
nice trick \m/

hope said...

awesome tutorial! but it didn't work for me :(

Jemimah C. said...

Wow! You have such a great design blog! I'm enjoying looking around.

~Miss Raquel said... didn't work for me :P haha

The Tame Lion said...

Wonderful! Terrific!
Thanks, Emily!

kara.treadwell said...

I couldn't get it to work either. I'm new to blogging and don't understand the whole html thing totally so I could have easily done something wrong. If you were to help add numbered comments for me, what would you need from me?
I'd really appreciate the help!

Kara Treadwell Treadwells Math Adventures

ClaudiaKaY said...

Hi there, I tried to add the comments as instructed and no luck...I really love your designs, I got an error parsing message..and I cannot connect to your email for some reason, can find me here on blogger..Thread and Sparrow!
thanks, claudia

ClaudiaKaY said...

And thanks, again!