Tuesday, August 9, 2011

Numbering Comments in Blogger

EDIT:  This script works in Firefox, Chrome, and Safari, but not Internet Explorer (version 8). To be honest, I was surprised to learn this because the script is so simple, IE couldn't *possibly* mess it up, right? Wrong.  >.<  One more item on my list of geek reasons that IE is a bad browser!

But, never fear! If you're an IE user who wants to use comment numbering, you can download any of the browsers I mentioned above for free. Firefox is my personal favorite as it has so many useful addons available to do nifty things like block advertisements, and display "Web of Trust" ratings for websites so you'll know if a link you're about to click takes you to a known spam site. It's saved my hide on multiple occasions!

And did I mention they're all free?   :)

Hi, my name is Elby --- I'm the friendly admin of this joint!  :D

I was watching Snoodles count the comments for the giveaway this morning . . . by hand . . . and she mentioned that she'd like to have comment numbers --- an upgrade with which I could definitely agree!

So, I gave it a quick search and came up with a very detailed (i.e., AWESOME!) tutorial by Susie of 1st Floor Flat the Computery who had nevertheless been having trouble with getting it to work. Looking over her code, I saw some things which I could simplify, and now it's working on LilyPadQuilting with no problems. Yay!

Since the propagation of knowledge is a noble endeavor, I'll tell the interwebz how I did it!
Woot! Let's get started!

Like Susie, I'll mention first off that you must have your comments "embedded" under the post. To do this, log in to the design interface of your blog, click "Settings", and then "Comments", and make sure that "Embedded below post" is selected.

Click "Save Settings" at the bottom of the page.

Done? Alrighty, then --- let's get down to business! Click on "Design", and then "Edit HTML". Click the box entitled "Expand Widget Templates".

Now, hit "Ctrl" + "F" on your keyboard to bring up the "Find" box at the bottom (or top) of your browser. Type this into the box:
This should highlight the beginning of your blog.

Directly BELOW that line, paste this code:
<script type='text/javascript'>var commentCounter = 0;</script>
 This is just a snippet which creates a number we'll use later.

Now, remove the text that was in the "Find" box at the bottom of your browser, and type this in:
 This will highlight the last item in the top part of the comments.

Directly BELOW that line, paste this code:
<span style='display: block; float: right; font: bold 12px serif; color: #AAA;'>
    <script type='text/javascript'>
        commentCounter ++;
This creates a little box, adds one to that number we created before, and sticks it inside. For those of you who want to change the font, that's in the first line there: "font: bold 12px serif". You can find out how to change that by looking over these pages on W3schools: CSS Font, Font Property.

For those who want to change the color of the number, you can generate a color code at 4096 Color Wheel. Just paste the number it gives you where the "AAA" is right now. Don't delete the # (pound) sign, though! That tells the browser that what follows is a color.

Now, click "Save Template" at the bottom of the screen.

Well, that's all there is to it, actually. Wasn't that EASY??

Just remember that since Blogger only allows 200 comments per page, the counter will start over when you move to the next set of comments. To find the winner of your giveaway, add 200 to the number on the comment for each page you've gone through.

Good luck, and leave a (fabulously numbered) comment if you need help!


  1. Oh wow! Great instructions!! TY Elby!

  2. Neat...I didn't even know we could do that. I never have that many comments to worry about numbering them and since it is one a.m. I am not going to go through all this trouble tonight...or this morning...but if I ever get famous like you all I will remember this is here.
    And look...I will have a 2 beside my comment now, unless I can't count at 1 a.m...

  3. Not sure if the '2' is going to show up beside Tonya's comment or not, but as of right now, it's just showing a '1' next to Sasha's comment. No '2' next to Tonya's. Maybe it just numbers them to the next-to-last comment. Be interesting to see. I'm like Tonya, though. I think I only have 30-something followers. But I'm not blogging for the followers. I started the blog thinking I'd be keeping up with what I'm doing, but ever since I started blogging I haven't had a laptop to upload photos, and just recently I started working 12-14 hour days, so don't have the time or energy to post once I get home. That will slow down once October gets here, and by no means am I complaining. I'm happy I've got a job. And it's a job I enjoy about 90% of the time. Now...will I have a #3 next to my comment??? I'll have to check back and see!

  4. You're welcome, Sasha! Glad I could help!

    That's interesting, Deborah --- I've never seen it do that. Please, let me know if it happens, again. Maybe you could send a screenshot? I am intrigued!

  5. I think I've found the culprit, so the post has been updated accordingly. Thanks to Deborah and Joy for reporting the bug!


I am so happy to hear from you! I try to respond to all comments, but lately blogger has made that difficult! If you do not receive a reply, it may be because your profile is set on "no-reply". Edit your profile, and click "show my email address" and we'll be able to talk!
Please do not leave links to un-related blogs or products. That is not good etiquette and they will be deleted! :)