Numbered comments on threaded comments for Blogger/Blogspot


Tutorials - Tutorials

User Rating: / 0

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:
    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;
    font-size: 22px;
    color: #555555;
    background: url( no-repeat;
    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;
    • 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.

    About Us

    Royal Developer Top three Web Designing and Web Development Company in Dehradun, Uttarakhand, India. Royal Developer Best SEO Company in Dehradun takes pride in its philosophy of 'Employee First' which empowers to create a real value for the customers. Royal Developer can offer Best and cheap Website Development Software Development & SEO Services. We are the Best service Provider of SEO, SEM, SMO Services Company in Uttarakhand. Web Designing Course in Dehradun, Web Designing Classes in Dehradun, Web Design Training Institute in Dehradun, Web designing institute in dehradun, Best institute for web designing in dehradun, Web development training in dehradun, Web development course in dehradun, Web Designing Training in Dehradun.


    - Contact Information - 

    Add : RDIT Services Pvt Ltd, 3rd Floor, RGM Plaza, Above Chandu Canteen,
              23 Chakrata Road, Dehradun - 248001, Uttarakhand, India

    Email : 


     : +91 8171200108, +91 8979462451,
                                      +91 7895753921

    Quick Enquiry Form

    Enter your full name

    Enter your valid email address

    Enter your correct mobile number

    Invalid Input

    Your Message
    Invalid Input

    Enter Code
    Enter Code
      RefreshInvalid Input


    You are here: Home Tutorials Numbered comments on threaded comments for Blogger/Blogspot