Sunday, June 3, 2012

Numbered on threaded comments for Blogger/Blogspot?

Numbered on threaded comments for Blogger/Blogspot?

How you can add numbered comments to your blogger/blogspot but today we will learn how we can add numbered along with comment bubbles on our threaded comments too.

What is 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 a principal or a reply comment (.comment-thread li), content will bring us in front (:before) of the body of the comment, the number that is the counter at the time.

3:Then is incremented in one unit the counter (counter-increment).

See the screenshot:
Is not that great? Well,I am pretty sure most of you have been waiting for this cool trick.So let's begin applying it for our threaded comments system..

Step's to add bubble comment's count:

Step #1: If you are using the old Blogger/Blogspot interface:
  •     Go to Dashboard -Design -Edit HTML -Expand Widget Template (make a backup)

If you are using the new Blogger/Blogspot interface:
  •     Go to Dashboard -Template -Edit HTML -Proceed -Expand Widget Template (make a backup)

Step #2: Search (CTRL + F) for this piece of code:


Add the following code just above it:

If you want to copy the below code then click here.
.comment-thread ol {
counter-reset: countcomments;
.comment-thread li:before {
content: counter(countcomments,decimal);
counter-increment: countcomments;
float: right;
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;

  • Remove the code in red (including the blue code) if you want to remove the comment bubble.
  • To change the comment bubble,replace the code in blue with the URL address of your own icon.If you're undecided what icon you should use,you can find some cool icons in my blog.
  • To change the position of comment's count,increase/decrease the values (3 & 10) from padding-top and padding-left.
  • To change the position of comment's bubble/icon, change the values (10 & 7) from margin-left and margin-top.

Step #3: Now save the template and you're done.!

 If you enjoy reading this blog,Please share and subscribe for any questions leave a comment below.


Post a Comment

Make sure to click the "Subscribe By Email" link below the comment for to be notified of follow up comments and replies..