How to number comments in Blogger

comment numberCommunicate better with your readers by improving your comments section.

A while back I wrote a tutorial on how to highlight author comments to help readers spot blog author’s response to their comments.

In this article I will show you how to number comments, in other words to display a number to each comment. Some of the benefits are:

  • Having a number attached to each comment greatly helps when you are referring to a specific comment. For example, instead of saying “JohnDoe, similar question has been answered previously to MsBlogger, please scan through the comments ….”  you can pinpoint the comment by saying “JohnDoe, similar question has been answered in comment #44….”.
  • This comments numbering hack also gives you access to the comments permalink which can be used for direct linking to the comment. So for the above example, if you were to add the permalink to the text, then clicking it will transfer you straight to comment #44, without the need to scroll down. 

Okay let’s get started.

  1. Login to your Blogger account.
  2. Go to Dashboard > Design > Edit HTML.
  3. Back up your template.
  4. Tick the  Expand Widget Templates check box on top right of the HTML window.
  5. Look for codes similar to the following lines in your template HTML:
    <b:includable id='comments' var='post'>
    ... some contents here .....
    <dl id='comments-block'>
    <b:loop values='data:post.comments' var='comment'>
    <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
    <b:if cond='data:comment.favicon'>
    <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
    </b:if>
    <a expr:name='data:comment.anchorName'/>
    <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/>
    </dt>
    <dd class='comment-body'>
    ... some more contents here....
    </dd>
    </b:loop>
    </dl>
  6. Insert the highlighted code snippets into the code, as shown below.
    • Put first code snippet between the opening <dl> tag (line 3) and <b:loop values='data:post.comments' var='comment'> tag (line 9).
      For Designer Templates, the exact <dl> tag to look for is <dl expr:class='data:post.avatarIndentClass' id='comments-block'>.
    • Put the second code snippet between <data:commentPostedByMsg/> data tag (line 20) and the closing </dt> tag (line 29).

    Be extra careful when inserting the codes because you template may have multiple <dl> tags, </dt> tags or comments-blocks.

    <b:includable id='comments' var='post'>
    ... some contents here .....
    <dl id='comments-block'>
    <!-- set comment counter Start -->
    <script type='text/javascript'>
    var CommentsCounter=0;
    </script>
    <!-- set comment counter End -->
    <b:loop values='data:post.comments' var='comment'>
    <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
    <b:if cond='data:comment.favicon'>
    <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
    </b:if>
    <a expr:name='data:comment.anchorName'/>
    <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/> 
    <!-- Comment count and display START -->
    <div class='commentnumber' style='font-size: 20px;padding:0 10px;'>
    <a expr:id='&quot;comment-&quot; + data:comment.id' expr:href='&quot;#comment-&quot; + data:comment.id' title='Comment permalink' style='float:right; margin-top:-20px;'>
    <script type='text/javascript'> 
    CommentsCounter=CommentsCounter+1; document.write(CommentsCounter)
    </script>
    </a></div>
    <!-- Comment count and display END -->
    </dt>
    <dd class='comment-body'>
    ... some more contents here....
    </dd>
    </b:loop>
    </dl>
  7. To style the number you can add properties to the style attribute in line 22 or you can create a separate element definition in CSS, like this: 
    .commentnumber { 
    /* add styling codes here */ 
    }

    And place the it before ]]></b:skin> line in your HTML.

    To adjust vertical alignment of the number, change the value of margin-top: -12px; in line 23.

 

A bug…and how to fix it

The above counter will only accumulate within a page. The count doesn’t carry over into the next page. Since Blogger only shows up to 200 comments per page, this in effect will limit the displayed count to only 200. The 201st comment will be numbered 1 again (instead of 201) because it lies on a new page! So will the 401st comment and so on.

To fix that, replace  code line 4 to 8 with this one:

<!-- set comment counter Start -->
<script type='text/javascript'>
//<![CDATA[
  var regexpatt = new RegExp('commentPage=([0-9]*)');
  var results = regexpatt.exec( window.location.href );
  if(results == null)
{
    var CommentsCounter = 0;
}
  else
{
    var CommentsCounter = (results[1] - 1) * 200;
}
//]]>
</script>
<!-- set comment counter End -->

If you can’t even see your 200+ comments (let alone the numbering) then read Solving 200+ comments display problem first. After you have that fixed, come back here to continue with the numbering.

Enjoy!

Credit: Vagabundia

188 comments to "How to number comments in Blogger"

Dosz July 26, 2009 at 11:35 PM    

nice one! im going to use it la! :)

Greenlava July 27, 2009 at 1:49 AM    

Thanks, and do come back...

Coupon Clippin' Mommy November 3, 2009 at 10:42 AM    

Awesome. Thanks!

Greenlava November 3, 2009 at 9:12 PM    

Coupon Clippin' Mommy,
You're welcome. I see you've got it working in your blog.

Jessi November 6, 2009 at 11:24 PM    

begging for help i cannot get this to work on my blog no matter what i try, I am getting desperate I need my numbers back

Greenlava November 7, 2009 at 2:12 AM    

Jessi,
I checked your blog. I think you left out the first script (code line 6 ~ 10).
Find this in your HTML:
dl id="comments-block" class="avatar-comment-indent"
and add the script below it.

Jessi November 7, 2009 at 4:26 AM    

no i had all that stuff by the time you looked i had deleted all the coding i added in

Khairi November 7, 2009 at 12:08 PM    

When I applied in my blog. It doesnt look as pretty as yours.

How to make it 'biasa2' like normal numbering in microsoft word. Numbers at the start of the paragraph.

bereh, thanks.

Greenlava November 7, 2009 at 8:56 PM    

Khairi,
Try reposition the second part of the code (line 25~33) inside the comment paragraph: [p][data:comment.body/][/p]
like this:
[p]CODE HERE[data:comment.body/][/p]

Jessi November 8, 2009 at 12:10 AM    

If i sent you my template do you think you could try to figure this out for me? I am so frustrated up to this point.

Greenlava November 8, 2009 at 12:30 AM    

Jessi,
I can see the second part of the code in your source code even right now.
I'd think if you just add in the 1st part, the numbers will come out.

Greenlava November 8, 2009 at 12:41 AM    

Okay, sent it in. I'll look into it tomorrow. I'm off to sleep now.

Jessi November 8, 2009 at 12:42 AM    

ok have a good sleep ty i will email you the template

Cher November 10, 2009 at 7:21 AM    

I had this in my old template, but I recently redesigned and have a wordpress to blogger theme. Can you help me with comment numbering? ckachelmuss@gmail.com

Greenlava November 10, 2009 at 8:47 PM    

Cher,
I see you've got it fixed, 'cause I can see the numbers.

srhan November 11, 2009 at 7:51 PM    

hello, I made it successfully, thanks...
but after 7 comments the commenter photos not display, why?
can you help me?

Greenlava November 12, 2009 at 9:02 AM    

srhan,
This hack is so simple and straightforward, I don't think it could've caused the problem.

Jessi November 21, 2009 at 12:56 PM    

I am back :P Thsi time i have a different problem I am hoping you can help me with, you see i changed my layout, my numbers are still there but they are too wide and I lost my formatting you made for me, I am hoping you would be willing to help me out again, sorry to be a pain.

elliej November 22, 2009 at 4:35 AM    

I give up I tried this and I can't get it to work....dammit! Thanks anyhow.

elliej November 22, 2009 at 4:38 AM    

Somebody please help me with my numbering.

elliejf@gmail.com
http://alittleoftheother.com


HELP

Greenlava November 22, 2009 at 10:09 PM    

Jessi,
Check your email inbox.

Greenlava November 23, 2009 at 1:57 AM    

elliej,
Could you describe what the problem is?

Ashley January 7, 2010 at 3:26 PM    

Thanks soo much for this! I had lost my numbered comments when i updated my blog look & this helped me fix it!

Ashley
Closet of Free Samples
http://closetoftreasures.blogspot.com

Winkydinks January 10, 2010 at 1:49 PM    

thank you! I was trying to help a friend with their blog and yours was the only one that helped.

Firdaus aka FIR January 22, 2010 at 1:36 AM    

this is seriously the most amazing thing ever! this will save me SOOO much time when I run giveaways on my blog. thank you! xo.

Greenlava January 22, 2010 at 3:45 PM    

@Ashley, Winkydinks, Firdaus aka FIR
My pleasure guys

Allegro Melody February 4, 2010 at 8:42 AM    

Thanks - worked great for me. Doing a One World One Heart giveaway and am expecting loads of visitors.

Heather February 24, 2010 at 10:50 PM    

I can't figure out where to put it. HELP! I am having my first giveaway. Can I send you the code and you tell me where to put it?

Greenlava February 24, 2010 at 11:28 PM    

@Heather
Here's what you do:
1. Go to Layout > Edit HTML
2. Click Expand Widget Templates checkbox
3. Right click and Select All (the code)
4. Copy and save it into Notepad.
5. Email me the text file.

I'll add in the codes :)

Bucktown Bargains February 26, 2010 at 8:53 AM    

I put this code in but my comments aren't numbered.. Do I have to wait until I get new comments?
www.bucktownbargains.com

Greenlava February 26, 2010 at 12:54 PM    

@Bucktown Bargains
I don't see the code in line 6 to 10 in your template. Once you add that, it should work right away.

Vanessa February 28, 2010 at 3:51 AM    

I soo need help I have tried and my Hubby he is even a IT man and could not figure it out lol. Can someone pelase help me ...The code above should be in the Comment section in the HTML mine is laid out way diffrent I need help please email me
vanessalbrooksATgmail.com

Greenlava February 28, 2010 at 10:52 PM    

@Vanessa
Acording to your blogs source code, the comment section code is similar to this tutorial's.
Did you tick the Expand Widget Templates check box before checking the codes?
Email me if you still can figure it out.

KatieBug March 3, 2010 at 9:13 AM    

By the way it was for time2eatyall.blogspot.com

KatieBug March 3, 2010 at 9:13 AM    

Hi could you help me? I added the codes but my comments aren't showing up numbered. I have no idea where I went wrong

Greenlava March 3, 2010 at 2:06 PM    

@KatieBug
I believe this is your present code, it contains a duplicate and an error:

[data:commentPostedByMsg/]
[span class='commentnumber' style='float: right;font-size: 35px;']
[a expr:id='"comment-" + data:comment.id'][/a]
[a expr:href='"#comment-" + data:comment.id' title='This comment permalink']
[script type='text/javascript']
CommentsCount[/script]
[/a][/span]
er=CommentsCounter+1; document.write(CommentsCounter)


[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]
[/dt]

replace it with this:

[data:commentPostedByMsg/]
[span class='commentnumber' style='float: right; font-size: 20px;padding-right:15px;']
[a expr:href='data:comment.url' title='This comment permalink']
[script type='text/javascript']
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter);
[/script]
[/a]
[/span]
[/dt]

Harys March 13, 2010 at 2:29 PM    

i have do all the step .. but the number still doesn't appear in my blog. Could you visit my blog here http://nothingtooperfect.blogspot.com and tell me what should i do.

i hope you will answer it soon

KatieBug March 14, 2010 at 8:49 AM    

I've tried many times on my blog and can't seem to get it to work...can you please help me??

Greenlava March 14, 2010 at 3:58 PM    

@Harys
Looks okay from here

Greenlava March 14, 2010 at 3:59 PM    

@KatieBug
Have you tried my answer in reply #36?

Brandy April 18, 2010 at 3:57 AM    

Boo. I tried to do this but I don't think my code is the same. I've searched UP AND DOWN for this section but can't find it. =(

Greenlava April 18, 2010 at 1:52 PM    

@Brandy
I guess you found it 'cause I can see the numbers now.

babyrocasmama May 2, 2010 at 5:33 AM    

I cannot get this to work for me. The template I am working with is missing the "postedbymsg" part of the code and no matter where I add it, It gives me errors. Can you please help me? I have been trying to fix this for more than two months!!

Greenlava May 2, 2010 at 11:41 AM    

@babyrocasmama
I hear ya :), now give me your blog url.

babyrocasmama May 3, 2010 at 8:52 AM    

Greenlava,

THANK YOU!! Here is the URL http://misadventuresinbabyraising.blogspot.com/

It is my friend's blog that she having me do some design & coding work on. If you can help me FINALLY get this fixed, I would be forever grateful. :)

Greenlava May 3, 2010 at 2:30 PM    

@babyrocasmama
Try reposition the second part of the code (line 21 to 28) here:
[div class='info']
[p class='small'][span][a expr:href='data:comment.url' rel='nofollow' title='comment permalink']
[data:comment.timestamp/]
[/a]
[b:include data='comment' name='commentDeleteIcon'/]INSERT THE CODE HERE[/span][/p]

babyrocasmama May 5, 2010 at 6:38 PM    

@GreenLava,

That did not work. :( Do you any other suggestions for me? I really need to get this done as soon as possible. Or get her a new template. LOL

Greenlava May 5, 2010 at 10:20 PM    

@babyrocasmama
That should've worked, I tested it.
I see you haven't repositioned the code to the right place. I also see 2 instances of the code (the second part), all at wrong places.
Just try one more time, use Ctrl+F to look for "info" or "small" to get to the correct place.
If you still having trouble after this and have a sudden urge to bang your head against the wall :)), then email me.

babyrocasmama May 6, 2010 at 3:45 AM    

Greenlava,

Lord, I thought I got rid of all the duplicate codes in there. OY! Ok I will try it again. What is your email just in case I feel the urge to bang my head against the wall? :P

Ariane May 19, 2010 at 1:38 PM    

I cannot get this to work. And now, I have over 600 comments in my last post, but only 300 and some show up when I open the comments box. I've added all the codes. I've double checked everything. I don't know what I did wrong. I'm not getting any numbers, and now I don't even have all my comments. Help! Ariane

Greenlava May 19, 2010 at 3:47 PM    

@Ariane
You fixed it. I see them numbers, in Firefox, Chrome and IE!

Ariane May 19, 2010 at 10:01 PM    

I still can't see the numbers on my comments. I have all my comments back. Which is great! But why can't I see the numbers if you can. I use internet explorer. Why isn't it working for me?

Greenlava May 19, 2010 at 11:45 PM    

@Ariane
Let me guess...you clicked the "xxx comments" link on homepage, a window popped up showing only comments.
Well you won't see the numbers that way. You have to go to the post page (by clicking your post title), only then you'll see numbers.

Ariane May 20, 2010 at 4:26 AM    

Ah!!! That's awesome!! Thanks so much!!!

Dana ♥ June 5, 2010 at 11:20 AM    

I really appreciate you sharing this. I've got something off because it's showing several numbers ....22 23 24 etc. on each comment.

I'm going to look back throughit and see if I can find my error. If you happen to see anything obvious, I'd appreciate your knowledge.
Thanks, Dana
www.cockrumchronicles.blogspot.com

Dana ♥ June 5, 2010 at 11:35 AM    

Awesome! I figured it out! DUH! I copied your lines and forgot to take out the last set of numbers.... Thanks!

Dana ♥ June 5, 2010 at 11:43 AM    

IT's me again.. ☺ Now - how do I make the numbers smaller or change the font? Is it linked to something else or is there a certain place I need to do that. My current numbers are too big and are cut off after # 3

www.cockrumchronicles.blogspot.com

Thanks, again. I'll check again, who knows maybe i'll figure out that too. ☺

Greenlava June 6, 2010 at 4:27 PM    

@Dana ♥
Font styling is defined in code line 22 -font-size.
On another note, I've updated code line 23 to make sure each comment number links to itself. Please replace your line 23 with the new one.

Froggy June 25, 2010 at 8:35 AM    

Thank you, thank you, thank you and THANK YOU!

Awesome tutorial. My coding wasn't exact so I had to do some searching but once I found the right place it was good to go! I love my new numbers. :-)

http://darwinsfrg.blogspot.com

Froggy June 25, 2010 at 8:37 AM    

Not sure, did my comment go thru? I had to refresh my page. But the small and skinny was THANK YOU!

Heather @ Girl Gone Mom (formerly The Penny-Pinching Mama) June 25, 2010 at 10:59 AM    

This is frustrating - no tutorial will work on my blog. Wondering if it has to do with blogger's new template designer.

Greenlava June 25, 2010 at 1:08 PM    

@Heather @ Girl Gone Mom (formerly The Penny-Pinching Mama)
I see you have added the second part of the code (line 2 to 28) in the right place.
The problem is in the second part (line 4 to 8). Place it after this line in your template:
[dl expr:class='data:post.avatarIndentClass' id='comments-block']

KdBuggie Boutique June 30, 2010 at 11:39 PM    

Ok, I've been trying to do this for about an hour now. I have checked and rechecked my codes and I can't get my numbers to show up either!!
www.kdbuggie.blogspot.com

Greenlava July 1, 2010 at 2:11 AM    

@KdBuggie Boutique
I can see them in Firefox, IE and Chrome. What browser are you using?

OutnumberedMama July 5, 2010 at 11:35 PM    

I have all th code in - I think correctly, but I just can't seem to get it work. any chance you could help me out - http://guidetosurvivingmotherhood.blogspot.com

allthingsnew July 8, 2010 at 12:36 AM    

Yay! I just tried this and got my comments to number above 200. Thank you SO much! I only have two problems remaining, and I'm wondering if you'd be able to help? 1) There are two sections in my posts showing comments...one says I have 495, the other says 429... 2) Even though it shows 495 comments, I can only see up to 480?

here's the url of the post I'm talking about in case that helps: http://sweetsavingsincolorado.blogspot.com/2010/06/vanity-vanityall-is-vanity-remodeling.html#comment-form

Thanks so much!

Greenlava July 8, 2010 at 12:08 PM    

@OutnumberedMama
But I don't see the code anywhere in your template.

Greenlava July 8, 2010 at 12:24 PM    

@allthingsnew
I see you still have the original code
[script type='text/javascript'>var CommentsCounter=0;[/script]
in there.
Remove it, and see what happens

OutnumberedMama July 8, 2010 at 1:02 PM    

I had to take it out because it made it so that people couldn't leave comments at all. I really don't know what I am doing wrong. Either, it won't save because the code is incomplete or it saves but there are no numbers and then people can't leave new comments.

Greenlava July 9, 2010 at 6:06 AM    

@OutnumberedMama
In Design > Edit HTML click the Expand Widget Templates checkbox, right hand click the code and select all. Save it in Notepad.
Email me the file.

CFTC HP July 10, 2010 at 9:32 PM    

hello from old Europe

new lay out on my blog (cftchp.blogspot.com) and numbered comments have disapeared..

I do not find where and what commands I should insert to get them back

Many thanks for your help, I am deseperating...

Greenlava July 11, 2010 at 12:52 AM    

@CFTC HP
Just follow the tutorial. It is good for the new Template Designer too.

CFTC HP July 11, 2010 at 5:21 PM    

Thank you Greenlava, I am following the tutorial, I found where I should place the commands but then I cannot open the comments anymore... So I cannot see if they are numbered !

CFTC HP July 11, 2010 at 5:25 PM    

Forget what I said, it works ! I was abused by the preview. Many many many thanks !!!

Greenlava July 11, 2010 at 5:52 PM    

@CFTC HP
:)

spk July 20, 2010 at 3:51 PM    

green lava, i don't know where to comment your website as a whole. so i am commenting here.
THIS WEBSITE IS UNIQUE. I FOUND MANY OF MY SOLUTIONS FORM THIS WEBSITE. THANKS A LOT !

spk July 20, 2010 at 3:58 PM    

i am not able to find that codes mr.green lava
my site: http://scientisttoday.blogspot.com

Greenlava July 21, 2010 at 9:03 AM    

@spk
Make sure you tick the Expand Widget Templates checkbox prior to finding the code.

Dana ♥ July 21, 2010 at 10:47 PM    

You have saved me once again! When I switched to the new blogger design template all my numbering was gone. At first I couldn't find the right part of the code so I thought this tutorial would no longer work. I just needed to look a little more. Thanks so much! My numbers are back!

Blogroll Please... July 24, 2010 at 2:08 AM    

Hi, I have been trying to find a tutorial for numbering comments, but they all refer to this code:

dl id='comments-block'

However, I can not find this code in my html. I have expanded the widgets and everything. Can you help me?

Greenlava July 24, 2010 at 3:58 PM    

@Blogroll Please...
As stated in step 6, you can also look for this code:
b:loop values='data:post.comments' var='comment'
and place the counter code before it.

Blogroll Please... July 26, 2010 at 3:47 AM    

Ok, well I tried that and it still isn't working. I put the first code between:

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

and

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

and the second code between:

data:commentPostedByMsg/

and

/dt

Can you think of any reason why it is not working?

Thanks!

Greenlava July 26, 2010 at 4:46 PM    

@Blogroll Please...
But I'm looking at the numbers right now.
Please read reply #53

Blogroll Please... July 27, 2010 at 11:48 PM    

Oh, wonderful!! I didn't think to check the comments that way... Thanks for the tips!

slovelady August 10, 2010 at 9:48 PM    

works beautifully - Thank you so much for your post!

Michael August 15, 2010 at 4:38 PM    

hey, thanks for this tutorial... i've used it on my [a href="http://yourlooktoday.blogspot.com"]blog[/a]. BlogSentral has been so helpful to most of my blogging needs... You guys need to be promoted. LOL

Jan @ bobbypins boardwalk August 15, 2010 at 5:44 PM    

Is it possible that my comment codes in HTML would look different? For example -- I don't have numbers on the left side of my HTML and I don't see the exact wording that you have displayed from your HTML. I would love to have the numbering, but am unable to get it to work for my blog. Thank you.

Greenlava August 16, 2010 at 11:21 AM    

@Jan @ bobbypins boardwalk
Yes your code is a little different...just a little. Template don't have the numbers, they are generated, as visual aid for this tutorial.
I've look into your source code. Your are using Minima template and in your case:
1. Step 6 code line 3 would be
[dl expr:class='data:post.avatarIndentClass' id='comments-block']
2. Step 6 code line 20 -no change.

Amber August 20, 2010 at 8:19 AM    

Thanks for the tutorial! Any way you can take a look at mine and tell me what I'm doing wrong? I pasted the code but I must have missed something. The numbers are not showing up :(

http://ihgiveaways.blogspot.com/

thank you for your help!

Greenlava August 20, 2010 at 3:03 PM    

@Amber
See reply 53

Amanda-The Nutritionist Reviews August 23, 2010 at 12:01 AM    

Thank you SOOOO much! It worked for me : )

☼¨`*•.♥Rocío♥.•*¨`☼ August 26, 2010 at 3:37 AM    

Hello!
I have a question about how to protect my blog from people stilling my images. Check this site they are protected and the right click is not available. http://capturingmememories-stephlynn.blogspot.com/
Do you know how to do that? I tried to do it from this tutorial but did not work.
Thanks in advance!
Tutorials Links but they don't work on my blog, I must be doing something wrong:
http://www.dynamicdrive.com/dynamicindex9/noright.html

http://www.bloggertricks.com/2007/12/how-to-disable-right-click-in.html

http://cinnamongirlstudiodesign.com/2010/03/protect-your-images-in-blogger-no-right-click/

http://www.hypergurl.com/norightclick.html

Thanks again! I know you have a good answer!

Truc August 27, 2010 at 11:27 AM    

Can you please help? I tried copying the code to my blog html but I don't see the numbered comments. I didn't get any errors after I copied the new code and saved the template. Not sure if the problem is that my original code didn't seem to tie exactly to what you have so I don't know if I copied the new code to the right place.
My blog is http://treats-sf.blogspot.com
Thank you!

Greenlava August 27, 2010 at 9:11 PM    

@Truc
Have you removed the code? I can find it (in your source code).

Greenlava August 29, 2010 at 5:10 PM    

@☼¨`*•.♥Rocío♥.•*¨`☼
To disable right click for the whole blog, go to Design > Edit HTML and replace [body] tag with this:
[body onContextMenu="return false;"]

☼¨`*•.♥Rocío♥.•*¨`☼ August 31, 2010 at 5:38 AM    

Hi Greenlava,
I have follow your instructions and I still can see the numbers. Help me please!
Oh and I have disable the right click thanks so much for that help.

Greenlava August 31, 2010 at 4:03 PM    

@☼¨`*•.♥Rocío♥.•*¨`☼
I only see the second part of the code (line 2 to 28) in your template. It's at the right place.
The first part (line 4 to 8) is nowhere to be found.

Truc September 2, 2010 at 12:00 PM    

any chance you were able to determine why the numbers weren't showing on my comments? Thank you!

Greenlava September 2, 2010 at 3:56 PM    

@Truc
Your case is similar to reply #97.
Paste the first part of the code right before:
[b:loop values='data:post.comments' var='comment']
add you will see your numbers

Truc Luu September 3, 2010 at 4:05 AM    

It worked!!! Thank you so much! :-)

John September 5, 2010 at 5:04 AM    

Thank you for your amazing and efficient code!

Greenlava September 5, 2010 at 7:12 PM    

@John
You're welcome, and thanks for leaving a comment.

Angie September 12, 2010 at 10:19 PM    

i did it but ran into the over 200 comment issue for the first time. When you say "replace lines 4-8" to fix it are you refer to lines 4 through 8 in the numbering code you have posted? I'm just making sure you don't mean in the template.

Greenlava September 13, 2010 at 12:23 PM    

@Angie
Yes, I mean the line number in my post. Your template doesn't have line numbers.

Angie September 13, 2010 at 9:51 PM    

oh yea, ok i fixed it. Now it's numbering right. thanks! I love your tutorials. Do you have one on making a blog button you can share?

Greenlava September 14, 2010 at 1:44 AM    

@Angie
Blog button?
Is this what you're looking for?
How to make a “Grab this” linkback button
or this?
How to install “link to us” widget

Miss Stik September 16, 2010 at 7:11 PM    

Oh my! I tried it five times (visited several tutorials) and the 'exemple'-thing (I don't know how you would call that in English) showed my blog just as before.
I saved it anyway and... it worked!
Thanks a lot!

Kim September 18, 2010 at 2:02 PM    

i know NOTHING about html and have no idea where to insert what. can someone do this for me? haha

Judylynn September 19, 2010 at 2:03 AM    

Ok, I have a problem in my blog since adding code from another tutorial. The numbers are showing up, but look at what is happening when you look at the comments:

http://seizethebookblog.blogspot.com/2010/09/book-review-making-waves-by-lorna.html

and even worse:

http://seizethebookblog.blogspot.com/2010/09/second-day-of-blogmania.html

What happened and how do I correct it? HELP!

Greenlava September 19, 2010 at 2:43 AM    

@Judylynn
Find this (I intetionally add a gap between the opening bracket and dd, so I can post the code in here):
< dd class='comment-body' style='clear: both;'>expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>

and remove the greater than sign in widdle of the code:
< dd class='comment-body' style='clear: both;' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>

Judylynn September 19, 2010 at 4:47 AM    

OK, when I try that, it gives me this message:

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Element type "dd" must be followed by either attribute specifications, ">" or "/>".

Greenlava September 19, 2010 at 8:05 AM    

@Judylynn
Follow these exact steps:
1. Paste this code to replace your existing code:
< dd class='comment-body' style='clear: both;' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
2. Remove the space between the "<" and "dd".
3. Save template.

Judylynn September 19, 2010 at 9:31 AM    

OK, that worked for this post:

http://seizethebookblog.blogspot.com/2010/09/book-review-making-waves-by-lorna.html

but not for this one:

http://seizethebookblog.blogspot.com/2010/09/second-day-of-blogmania.html

What's wrong now?

(you have been so kind to help - thank you!)

Greenlava September 19, 2010 at 5:39 PM    

@Judylynn
Once it worked, it should work on all posts.
Try reloading/refreshing the page.

Judylynn September 19, 2010 at 11:52 PM    

It is still doing this (see this post):

http://seizethebookblog.blogspot.com/2010/09/second-day-of-blogmania.html

Greenlava September 20, 2010 at 12:29 AM    

@Judylynn
Looks fine from here -viewed in Firefox, IE and Chrome.
Have a look.

Judylynn September 20, 2010 at 9:57 AM    

Did you see how the comments get "thinner" and thinner as you scroll down? Or do they all look normal when you open it? Am I imagining things? :)

Greenlava September 20, 2010 at 2:09 PM    

@Judylynn
I hate to say this, but it seems you are (imagining things) :)
Why don't you ask a third person to view the post?

Kelly September 26, 2010 at 11:14 AM    

I've tried and tried and I can't seem to get this :(

Dawn September 27, 2010 at 7:25 PM    

Greenlava,
I changed my theme and lost the numbering. I tried adding it again but it has made numbering mistakes. Is there a fix?
http://familyof5inacedarswamp.blogspot.com/

Dawn September 27, 2010 at 8:30 PM    

Ok, i have the crazy numbers figured out. But the numbering is not working.

follow up from 120

Greenlava September 27, 2010 at 8:37 PM    

@Kelly
Have you added the required code in your template?

@Dawn
Three things:
1. Don't copy the line numbers. Click the <> icon to copy code without line numbers.
2. The second part of the code (line 21-28) is already at the right place, just need to replace it with the one without line numbers.
3. The first part of the code: remove it, then read reply #99.

Kelly September 29, 2010 at 5:27 AM    

I added the code above and nothing happened- I obviously did something wrong. I wish you could search your html.. it would be a lot easier to find what you're are looking for!

Greenlava September 29, 2010 at 4:46 PM    

@Kelly
Looks like you finally made it :)
I see the numbers now.

Lisa B. October 15, 2010 at 12:43 PM    

Oh god, I'm getting ready to end a giveaway and tried to fix numbering, now there is no numbers!

Can you check my html? I've got something messed up somewhere.

Lisa B. October 15, 2010 at 12:43 PM    

Oh, here is the link to make it easy to find. http://easyfrugalliving.blogspot.com/2010/09/sodastream-fountain-jet-giveaway.html

Lisa B. October 15, 2010 at 10:06 PM    

FINALLY! I got it! I had numbering before, so when I did your steps it numbered it again and was showing TWO sets of numbers for each comment! lol

Never had over 200 comments until now, this worked great!

Thank you

Greenlava October 15, 2010 at 11:52 PM    

@Lisa B.
Deadline on the 16th? Phew! that was close :)

Momsy Katsy @My Tots Exactly October 18, 2010 at 10:22 PM    

Hi! This worked great, I think. I was able to put the numbering on my blog but I guess I'll never know until I hit 200 comments. I'm hoping to get that when I launch my giveaways so thanks so much for the help.

Just a question though, my comment's timestamp is below the author and since I put your code, the delete icon or trash bin only shows half of the icon. I guess since I'm the blog author I see all the trash bin icons but if you leave a comment, you might be able to see it too and maybe let me know your thoughts on it. My worry is if a reader leaves a comments and wants to delete it, he/she may not recognize the half-trashbin delete icon ;)

~~ Kat ~~
My Tots Exactly!

Greenlava October 19, 2010 at 2:34 PM    

@Momsy Katsy @My Tots Exactly
Look for this code in your (expanded) template:
[span class='delete-comment-icon']& #160;[/span]
(there is no space between ampersand and pound sign in the actual code. I had to insert space for it to display correctly here)
replace it with this:
[span class='delete-comment-icon']& #160;& #160;& #160;[/span]

Pranab December 8, 2010 at 5:54 PM    

hello Greenlava !
am here again after giving u worries in the "installing horizontal drop down menu thread". just added comment numbering in my blog "droppingdew.blogspot.com". but again it looks different in chrome & ie & firefox.
Please help !!!

Greenlava December 9, 2010 at 5:58 PM    

@Pranab
.commentnumber {
width : 100px;
height : 60px;
background : url(http://3.bp.blogspot.com/_y29MZBeTLyY/TP9KGLywDrI/AAAAAAAAA6Y/lgkkCvDLN0c/s1600/commentNumberxx.png) no-repeat;
margin-top: -38px;
margin-left : 450px;
text-indent: -148px;
text-align : center;
font:normal 20px verdana;
color: black;
padding-top: -9px;
}

change to:
.commentnumber {
width : 50px;
height : 60px;
background : url(http://3.bp.blogspot.com/_y29MZBeTLyY/TP9KGLywDrI/AAAAAAAAA6Y/lgkkCvDLN0c/s1600/commentNumberxx.png) no-repeat;
margin-top: -38px;
margin-left : 450px;
text-align : center;
font:normal 20px verdana;
color: black;
}

and you want to remove float:right; from code line 23.

Pranab December 9, 2010 at 8:56 PM    

Dear Greenlava,

Thank you so much !!
it worked .. but now in every post the comment section is coming on linkwithin widget while accessing in IE. and for me you are the only hope.
please help !!

Scribble Scrabble December 22, 2010 at 12:11 AM    

Thank you! This was so easy. I am impressed that I was able to add this code.
The only thing is that the #'s are on the right of the comments, is there a way to change that to the left of the comment?

Greenlava December 22, 2010 at 8:01 AM    

@Scribble Scrabble
Add float:left; in line 22 and change float:right to float:left; in line 23.

Cheryl F. {The Lucky Ladybug} December 30, 2010 at 2:24 PM    

Thanks so much for your perfect instructions! Easy-to-use and worked like a charm :)

Holly @ Roller Coaster Life January 3, 2011 at 1:17 PM    

I did it twice and still I don't seem to be doing it right! =(

Greenlava January 3, 2011 at 3:28 PM    

@Holly @ Roller Coaster Life
I see you have in adding the second part of the code.
The problem is with the first script (line 4 to 8).
Find this line of code:
[dl expr:class='data:post.avatarIndentClass' id='comments-block']
and place the script right after it.

Holly @ Roller Coaster Life January 6, 2011 at 11:12 AM    

You rock thank you =)

Sheena January 16, 2011 at 1:11 PM    

Thank you, Thank you!! I wish I would have found your tutorial first. It was the only one that worked for me and was easy enough for me to do.
Thanks again!!
Sheena

Dia C January 20, 2011 at 10:51 PM    

I have been trying to get this to work for hrs but I can't get it to work. Can someone help me? Thank you!!!!

Greenlava January 23, 2011 at 7:51 AM    

@Dia C
I see you've worked it out...congratulations!

Kim - The Free Stuff Finder January 24, 2011 at 5:20 AM    

For some reason it's not working on my blog. Could you please take a look and help me out? Thanks!

Greenlava January 24, 2011 at 10:10 AM    

@Kim - The Free Stuff Finder
You forget to add the code in line 4-8.

Kim - The Free Stuff Finder January 24, 2011 at 11:29 PM    

I have it in there, but my code looked different than what you show on your site. I have it after: [dl class='comments-block' id='comments-block'] . I didn't have a code that was: [dl id='comments-block'].

Greenlava January 25, 2011 at 12:17 AM    

@Kim - The Free Stuff Finder
That must be under backlinks, that's why I can't see it.
Okay, move the code to the top of this line:
[b:loop values='data:post.comments' var='comment']

Kim - The Free Stuff Finder January 25, 2011 at 12:46 AM    

That worked!! Thank you SO much!

Chrissy @ Boerman Ramblings February 5, 2011 at 6:22 AM    

I can not seem to get this to work...please help ;)

Greenlava February 5, 2011 at 3:20 PM    

@Chrissy @ Boerman Ramblings
Do not include those code line numbers.
To copy properly, click the <> icon and copy the code from the raw code window.

Emily March 4, 2011 at 8:38 AM    

Every comment is numbered as 1... what am I doing wrong?

Emily March 4, 2011 at 8:50 AM    

sorry to bug you again. When I tried replacing lines 4-8 with the bug fix I am given this error message:

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The string "--" is not permitted within comments.

thanks for you help.

Greenlava March 4, 2011 at 11:36 AM    

@Emily
Looks like you have two instances of var CommentsCounter=0; added. You want to remove the second one, the one after < dd>.
That should fix your counter. View your blog to confirm.
Once you've got that right, apply the 200+ bug fix. Replace lines 4 to 8 (inclusive of line 4 and line 8) with the code.

Emily March 4, 2011 at 12:25 PM    

Thanks! I was able to fix the number problem, but I am still getting the error message when apply the bug fix.

Greenlava March 5, 2011 at 8:54 AM    

@Emily
Darn...there was a bug in the bug fix!
I've debugged it, should be okay now :)

Emily March 5, 2011 at 11:48 AM    

I appreciate all of your help, thank you. I feel really bad that I keep bugging you, but I am getting the error message when I try to apply the bug new fix.

Greenlava March 5, 2011 at 2:26 PM    

@Emily
Believe it or not there was an invisible bug!
But I've manage to sanitize it. Try copy paste it one more time. This time it will work, I promise :)

Emily March 6, 2011 at 12:47 AM    

Hip Hip Hooray!! That worked, thank you!

Chrissy @ Boerman Ramblings March 19, 2011 at 9:47 AM    

okay I am still having issues here is my html..can you fix it for me...

[b:includable id='backlinks' var='post']
[a name='links'/][h4][data:post.backlinksLabel/][/h4]
[b:if cond='data:post.numBacklinks != 0']
[dl class='comments-block' id='comments-block']
[b:loop values='data:post.backlinks' var='backlink']
[div class='collapsed-backlink backlink-control']
[dt class='comment-title']
[span class='backlink-toggle-zippy'] [/span]
[a expr:href='data:backlink.url' rel='nofollow'][data:backlink.title/][/a]
[b:include data='backlink' name='backlinkDeleteIcon'/]
[/dt]
[d class='comment-body collapseable']
[data:backlink.snippet/]
[/dd]
[dd class='comment-footer collapseable']
[span class='comment-author'][data:post.authorLabel/] [data:backlink.author/][/span] [span class='comment-timestamp'][data:post.timestampLabel/] [data:backlink.timestamp/][/span] [/dd] [/div]
[/b:loop] [/dl]

Greenlava March 20, 2011 at 1:53 PM    

@Chrissy @ Boerman Ramblings
The code above is for the backlinks.
There is another < dl> tag that's for the comments. Look for these lines:
[dl expr:class='data:post.avatarIndentClass' id='comments-block']
[b:loop values='data:post.comments' var='comment']

Jenn April 4, 2011 at 4:34 AM    

This worked perfectly!! Thank you so much!!!
-Jenn from Jenn's RAQ

Jeni Harvey April 18, 2011 at 6:27 AM    

Hello, I am trying to follow your tutorial and I have found all the places where I am supposed to insert the "highlighted code snippets" but nothing is highlighted so I am confused as to what the first code snippet is and what the second code snippet is. I know NOTHING about HTML. Thanks for any help you can give me!

Jeni Harvey April 18, 2011 at 6:48 AM    

Nevermind! I figured it out! It works GREAT, thank you!

raj,  April 28, 2011 at 6:35 PM    

Thankx... So far so good... Now I'am looking for a code where I can add boxes with some style to seperate comments

mempawah creation April 29, 2011 at 9:36 PM    

thank you for the tutorial, How to number comments in Blogger has been practiced and worked well. And permission for the same tutorial with the link of this blog as the source of the article. always successful.

Arcmond April 30, 2011 at 12:26 AM    

i have only this line of code:

[dl class='comments-block' id='comments-block']
[b:loop values='data:post.backlinks' var='backlink']

can you help me, i try to find codes under this line:

[b:includable id='comments' var='post']

but i can't.

Greenlava April 30, 2011 at 3:04 PM    

@mempawah creation
Permission granted :) as long as you link back to BloggerSentral.com.

@Arcmond
Use the search function (Ctrl+F) to find it.

hackrishna May 4, 2011 at 9:39 AM    

Hey Greenlava ..... Thanxx a lot ...... ^_^

U know i have seen this Numbering Trick in Many Blogger Tutorial Sites, But i was so lazy that after seeing the codings i used 2 change my Mind n thinks do it later..... Well Dnt know whats special in Your site ... 3 Hrs ago i started to Browse your Site ..... Now i Completed installing this Trick, Did some additional modifications n Read all the Comments also..

Hey sorry .... i Stoled ur Comment Block Styles ;)

-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
-webkit-border-radius:5px;

From your Source code n added it in Mine ... ;)

- hk

Μαρία May 31, 2011 at 4:02 AM    

Hi!
Great blog :) I would like to know if there is a way to increase font size in newer comment link? Some of my posts exceed the 200 hundred and "newer" link is too small to be noticed from some of my readers.
I would really appreciate your help :)

Greenlava May 31, 2011 at 10:14 AM    

@Μαρία
Add this snippet in CSS:

.paging-control-container {font-size:12px;}

replace "12px" with your preferred value.

Μαρία May 31, 2011 at 1:44 PM    

Hi Greenlava,
It worked like a charm! You can't imagine how long I've been looking to fix this!
Thank you sooooo much!

Greenlava June 1, 2011 at 1:48 AM    

@Μαρία
You're welcome

~Iffy~ June 1, 2011 at 2:26 AM    

Thanks so much I am going to try this for my giveaway starting tomorrow! Thanks so much!
~Iffy~
www.stayathomenation.blogspot.com

Prayag Verma July 4, 2011 at 2:38 PM    

thanks a lot

greeneyes August 15, 2011 at 1:31 AM    

What do I do if I don't have this line?

Greenlava August 15, 2011 at 3:39 PM    

@greeneyes
Look carefully, you'll find it. Oh, make sure you tick the Expand Widget Templates check box first.

HappyHappyJoyJoy August 17, 2011 at 12:56 PM    

Dude, you rock! Works like a dream! Thanks so much! My blogs get loads of comments and we run giveaways and this has made picking winners so much easier!

Asif Icbal October 8, 2011 at 12:29 AM    

thank you very much.

Lindsie October 8, 2011 at 5:32 AM    

So, I don't seem to have the <dl code in my comments section. I see it in the backlinks section, but I assume that's not where this should go. Can you check it our for me (url below)?

Lindsie
www.wed4lessnw.com

Greenlava October 10, 2011 at 1:58 AM    

@Lindsie
Invoke your browser's search function by pressing Ctrl+F, enter avatarIndentClass in the text box, and press Enter key.
It will take you to the [dl line:
[dl expr:class='data:post.avatarIndentClass' id='comments-block']

JENNIFER January 13, 2012 at 3:55 PM    

Excellent Tips! Thanks for sharing the information!

Lindsie January 15, 2012 at 4:57 AM    

So I got this working back in October, but it seems to have disappeared. The code is still there, but the numbers aren't showing up.

Website Promotion Services February 4, 2012 at 9:16 AM    

Hello mate
thank for nice information you gave
so I add you on my site.
cheers

I found your blog when I was looking for a different sort of informtion but I was very happy and glad to read throu your blog. The information available here is great.

Venture Capital Vietnam April 13, 2012 at 5:17 PM    

I’ve been seeking on the internet just for a high quality read in regard to this unique subject matter. Exploring in Yahoo I finally observed this fabulous site. After reading this So i am thrilled to state that I get a fine impression I came across the very things I wanted. I will ensure to don’t forget this website and look constantly.

videos May 10, 2012 at 9:23 PM    

Thanks for sharing.

android jelly bean tablet December 7, 2012 at 4:02 PM    

i do spend the time to read the comments on this blog, i must say this blog is truly one to follow. i will be sure to subscribe.

Circuits January 20, 2013 at 1:42 PM    

Thank you..... for this great post...

Android mobile application development July 22, 2013 at 6:00 PM    

I am blogger and I am sure this post is of great help for my work. You have narrated the article in a such a way that it is a clean picture.

Click to go to top Click to comment