How to Numbered All Comments in Blogger!

In the previous post I had shown How to add number in Blogger comments. But unfortunately that trick worked only for those blog in which threaded comment option is disabled. That means if your the threaded comment option is enabled in your blog then earlier trick will not work on your blog. If you want to enable threaded comment and number the comments as well then this post is dedicated to you. In this post I am gonna show how to number all numbered all comment in blogger.

To do this trick I am gonna use a simple CSS code. By adding this CSS code to you blog it will do following trick for your...

• When the a general section of comment is initiating, A comment counter will be activated and the comment will start with an initial value of 1.
• Then each time the code flow goes through a review of any level, either the original comment or a threaded comment. And it will bring in front of the comment's body the number that is the counter.
• And finally, this is incremented in the counter.
  
  

Warning: Before doing any kind of customization on your site's HTML page, I will recommend you to backup your site Template. To know more about Template backup Read This Post.

Adding Number to All Comments in Blogger:

• First Sign into your Blogger account and go to Dashboard.
• Then click on Template and then click on Edit HTML button. You will land on the HTML page.
  
• Here in the HTML page find ]]></b:skin> and Paste the following code just above it.

  .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/AVvXsEhmnBrf_TM2nehYrfXwawgBENSf-93kNSYyJnj0I0QWnHMDIwWCAtUz7b3vtKd1PEhV6i1Rqck3fIdHHV8plflWkWegIS0sMDawG4DzNnJfe762rYnPlTWHcaBeQh-G7gMtUtgDWAl2p1iU/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;  
 }  

• And finally click on Save Template button to apply the code.

Customization:

• If you don't want to have bubble icon, then Red part of the above code including the image URL shown in blue color.
• To change the comment bubble, Replace the image URL of the above code shown in blue color with your own image URL. Or you can try the image URL I had shared in the Previous Post.
• To change the comment count position, Increase/Decrease the values (10px & 3px) of padding-left and padding-top.
• To change the comment bubble/icon position, Increase/Decrease the values (7px & 10px) of margin-top and margin-left.

Stay with www.iTTimesbd.com for more IT related Post