Numbered comments on threaded comments for Blogger/Blogspot

In a previous tutorial you've seen how you can add numbered comments to your blogger blog, unfortunately, this trick worked only for those who don't have the reply option and are still using the old blogger commenting system. But we won't have any problem this time because this tutorial will show you how to add numbered comments with comment bubbles on the threaded comments, as well ;)

What the following CSS trick will do for you:
  1. When the general block of comments is initiating (.comments-content) a counter called countcomments activates and starts with an initial value of 1. 
  2. Then, each time the code flow goes through a review of any level, either the original comment or a reply (.comment-thread li), it will bring us in front (:before) of the comment's body the number that is the counter.
  3. Finally, this is incremented in the counter (counter-increment).
See the screenshot:
count comments, comment bubble, forum, blogger

Isn't that great? I'm pretty sure many of you have been waiting for this cool trick. So, let's begin applying it for our threaded commenting system.

Steps to add bubble comments count

Step 1: From your Blogger Dashboard, go to Template and click on the Edit HTML button:

... click anywhere inside the code area and press CTRL + F to open the Blogger' search box.

Step 2: Type the following tag inside the search box and hit Enter to find it:
]]></b:skin>
Note. you have to click on the arrow next to it, then search the ]]></b:skin> one more time 

Step 3: Add the following code just above ]]></b:skin>:
.comment-thread ol {
counter-reset: countcomments;
}
.comment-thread li:before {
content: counter(countcomments,decimal);
counter-increment: countcomments;
float: right;
z-index: 2;
position:relative;
font-size: 22px;
color: #555555;
padding-left:10px; 
padding-top:3px; 
background: url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQab8JW-1rOwd47_z5OgkyFopTYkT9YzaLw3DYkagUughfKCgwY98IGWI2UykQCEXt_NPCgoZjEJltp0CfxkW8j-pmSMtcX3KcefCjQbX0Va6WwM4ndjSmBmVMwl-e2NrCoxolVV5LE51s/s1600/comment+bubble2.png) no-repeat;
margin-top:7px; 
margin-left:10px; 
width: 50px; /*image-width size*/
height: 48px; /*image-height size*/ 

}
.comment-thread ol ol {
counter-reset: contrebasse;
}
.comment-thread li li:before {
content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin);
counter-increment: contrebasse;
float: right;
font-size: 18px;
color: #666666;
}
Note:
  • if you want to have no bubble icon, remove the code in red (including the address in blue)
  • to change the comment bubble, replace the code in blue with the URL address of your own icon. If you're not sure what icon you should use, you can find some cool icons in my previous posts (see these tutorials here and here)
  • to change the position of comments count, increase/decrease the values (3 & 10) from padding-top and padding-left
  • to change the position of comments bubble/icon, change the values (10 & 7) from margin-left and margin-top
Step 4: Now Save the Template and you're done!

If you enjoy reading this blog, please share and subscribe. For any questions you may have, leave a comment below.

55 comments:

  1. thank you SOOOOOOO much! This was so easy and worked like a charm!

    ReplyDelete
  2. This is a fantastic tutorial and so quick and easy.
    Thank you

    ReplyDelete
    Replies
    1. Desperately Seeking CodeJune 29, 2012 at 7:36 AM

      Hi, just wanted to check out the thread format.

      Delete
    2. Desperately Seeking CodeJune 29, 2012 at 7:38 AM

      And find out what happens when you reply to a reply.

      Delete
  3. Awesome tutorial! Worked like a charm. Thanks so much!!

    ReplyDelete
  4. Must say that you have an easy technique for integration which is producing good commenting system. Can you tell some good system which do not take much time as disqus commenting system takes a lot of time to load.

    ReplyDelete
  5. Finally found you after accidently trying your instructions for the older blogger, this one worked like a charm! It was easy and I am pretty clueless! Thanks again! I'm about to run my first contest and didn't want to count comments for it!
    Jan @ TipGarden.blogspot.com

    ReplyDelete
  6. It looks awesome and is exactly what I want~~ However I have followed your instruction but nothing happened.... may you take a look of my blog and make a guess of what went wrong?

    ReplyDelete
    Replies
    1. Hi Wenson, to be honest i have no idea why it doesn't work for you. Could please send me your template at helplogger76@gmail.com . Thanks

      Delete
  7. This was the EASIEST tutorial ever for adding comments!!! Thank you SO SO much! All other tutorials have you adding lines in 4 or more places and then half of the time it doesnt work, this was great! Thanks!

    ReplyDelete
  8. I really want to do this Igot to the step where it reads make a back up ----- How do I do that I was all ready to go and then I thought I might mess something up

    ReplyDelete
  9. Okay this one worked the comment bubbles are there but all of them are "1". LOL what have I done wrong now? Thank you so much for helping me out here. :)

    ReplyDelete
    Replies
    1. I don't know why this is happening to you. I, however, can't see anything implemented on your blog. Sorry for the late reply and if i can help with something, i would suggest you to add the code again and write me back here to take a peek at your blog to see what's wrong - if there is something. Thanks for visiting!

      Delete
  10. Since the new interface has offically "kicked-in" this is a DREAM!!! The old javascript method was no longer working and this one is SO EASY! I tested this in Firefox v15, IE9, Chrome v22, Safari v5, and Opera v12 and it works like a charm! It didn't work in IE compatibility mode (IE8 and older), of course but that's ok! THANK YOU SO MUCH!!!!!!

    ReplyDelete
    Replies
    1. You're very welcome. Thanks for your feedback!

      Delete
    2. Genious css styling!

      1/ As @Sara mentioned before, that doesn't work in IExplorer indeed.
      I tested against ie9 and earlier. Maybe in ie10 new compatibility would be a change.

      2/ About some complains that it didn't work for them.
      Maybe the comment form, in new blogger interface, has to be:
      |Settings| >> |Posts and comments| >> |Comment Location -> "Embedded"|
      or they have done some previous alteretions in their comment code section.

      very nice job!

      Delete
  11. Thank you so much for this. It worked perfectly for me. :-)

    ReplyDelete
  12. The steps are very simple, I don't think I can help you more than that.
    I can see no code added therefore i'm not sure if you have added it or why it wouldn't work for you. However, I would advise you to add it again and see if it works this time. In case it doesn't work, please write me back.

    ReplyDelete
  13. won't work for me...can you help me doing it...

    ReplyDelete
  14. can you help me how this work for me, i really want this to work, i like this

    ReplyDelete
  15. Its good bro! thanks! I love your tutorial its very easy

    from

    http://fromhobby2money.blogspot.com/

    ReplyDelete
  16. I can see the icons but I can't click on them..

    ReplyDelete
  17. Love the look of the speech bubbles. Thanks.
    Took me a while to work out that Command + F were the find keys for my MacBook Pro

    ReplyDelete
  18. Really informative and great post..

    ReplyDelete
  19. Thanks Admin, I got it worked on me...:)

    ReplyDelete
  20. thank so much for ur help! but may I know, how I dont want for example 12.a, 17.b etc... I want it counts all comments into number only for example 12,13,14 etc.. sorry with my broken english

    ReplyDelete
  21. I was able to get this to work for me for the first 200 comments, but can't figure out how to access the next pages of comments. Any tips?

    ReplyDelete
  22. Okay this one worked the comment bubbles are there but all of them are "1". LOL what have I done wrong now? Thank you so much for helping me out here.

    ReplyDelete
  23. Thank you so much for this. It worked perfectly for me. :-)

    ReplyDelete
  24. Hola: No me ha funcionado.Quiero implementar http://1.bp.blogspot.com/-g34ZwqIE7bw/T4yBJMyKrDI/AAAAAAAAB2g/fz0Ilonq-pA/s1600/text_comment_bubble_comments.png y no sé por que debo sustituirlo
    Puede ayudarme? Pongo el codigo como dice y no sale nada

    ReplyDelete
  25. Really Helped me alot Thanks for the tutorial. :)

    ReplyDelete
  26. Nice tip, thanks for sharing, I'm definitely using it in my new template :)

    ReplyDelete
  27. Hi, sorry for bothering, I thought it worked well but then I realized all comments are numbered as 1...Do you happen to have an advice?
    http://bricioleepuntini.blogspot.it/
    (still a template under construction, as you see).
    Thanks in advance
    Giulia

    ReplyDelete
    Replies
    1. Hi Giulia,

      Delete the code that you have already added from ]]></b:skin> and add it just above the </head> tag - it should be put between these tags <style type='text/css'> and </style>
      If it still doesn't work, please make a backup of your template and send it to this email: helplogger76@gmail.com

      Thanks

      Delete
    2. This worked :) thanks a lot for both sharing and helping!

      Delete
  28. Thanks..Work fine in Firefox but Numbered Comments doesn't show up in IE9..How to fix?

    ReplyDelete
  29. THANK YOU! I searched for ages for an updated tutorial on how to do this - this one looked the most up-to-date and it worked perfectly.

    One Lesson at a Time

    ReplyDelete
  30. Could you please help me? I tried following this tutorial and now my blog has duplicate identical comment sections on every blog post. And they still aren't numbered. I would appreciate any advice you could give me to fix my problem. Thanks!

    ReplyDelete
  31. Hi, Please add this line above ]]> : .comments .comments-content .comment {font-size: 13px;} Change the 13px value to make the font bigger/smaller. I hope this will work for you.

    Your are star...it worked.have a look http://clicksomemore.blogspot.com/2013/12/good-morning-folks.html?showComment=1388352730635#c6176263991028641025

    Thank you so much...will never stop visiting your blog for more updates and tricks

    Happy new year in advance!

    ReplyDelete
  32. One more thing, how to disable admin from listed as top commentor as i have to reply some comments and i will always be the top commentor .I dont want this coz Im planning to give a small gift to a winner on monthly basis starting Jan 2014. Pls help

    ReplyDelete
    Replies
    1. Edit the Top Commenters widget and search (CTRL + F) for the "someotherusertoexclude" text, then replace it with your username or any other that you want to exclude.

      Delete
  33. perfect.
    but how can I add a "author" tet to my comment?
    thanks

    ReplyDelete
    Replies
    1. Add this above ]]></b:skin>

      .blog-author:after{
      content:"Author";
      color: #1982D1;
      background:#F2F2F2;
      padding: 5px;
      margin-left: 5px;
      }
      .icon.blog-author:after{content:none;}

      To change the text color replace the #1982D1; value and to change the background color, change the #F2F2F2; value. Hope this helps.

      Delete
  34. Wow!!!Thanq so much :)
    It worked perfectly :)
    I have one doubt though I want my numbers to be numbered in a different font from my page.
    But when I include font: Georgia its over ridden by the default one...
    Do u know how to sort that out?

    ReplyDelete
  35. it didnt work till i removed Threaded comments and the voila....
    Thanks

    ReplyDelete
  36. Perfect blog and very useful for beginners to make a good looking blog. Thanks.

    ReplyDelete