Numbered Comments On Threaded Comments For Blogger/Blogspot

In a previous tutorial you've seen how yous tin dismiss add together numbered comments to your blogger blog, unfortunately, this play tricks worked exclusively for those who don't accept the respond pick as well as are nonetheless using the former blogger commenting system. But nosotros won't accept whatsoever work this fourth dimension because this tutorial volition demo yous how to add together numbered comments amongst comment bubbles on the threaded comments, also ;)

What the next CSS play tricks volition produce for you:

1. When the full general block of comments is initiating (.comments-content) a counter called countcomments activates as well as starts amongst an initial value of 1. 
2. Then, each fourth dimension the code menstruum goes through a review of whatsoever level, either the master comment or a respond (.comment-thread li), it volition convey us inwards front end (:before) of the comment's trunk the position out that is the counter.
   
3. Finally, this is incremented inwards the counter (counter-increment).

See the screenshot:

Isn't that great? I'm pretty certain many of yous accept been waiting for this cool trick. So, let's start out applying it for our threaded commenting system.

Steps to add together bubble comments count

Step 1: From your Blogger Dashboard, larn to Template as well as click on the Edit HTML button:

... click anywhere within the code surface area as well as press CTRL + F to opened upwards the Blogger' search box.

Step 2: Type the next tag within the search box as well as hitting Enter to respect it:

]]></b:skin>

Note. yous accept to click on the arrow side past times side to it, thus search the ]]></b:skin> ane to a greater extent than time 

Step 3: Add the next code only 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/AVvXsEgdUr3fmQbsGmQWlfLN36e727OSjnJLguxNa_0ZYK2h-xAzJrpa5Im4fy1-wxrcBEOAqS1xdj2H3RzLyBUG3HVBZkpS7RRM7g4KCfXCSbcLq9dlTh-WY2M-nw9So97H0CGKAvWBDnKcq-1n/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 yous desire to accept no bubble icon, withdraw the code inwards red (including the address inwards blue)
• to alter the comment bubble, supersede the code inwards blue amongst the URL address of your ain icon. If you're non certain what icon yous should use, yous tin dismiss respect roughly cool icons inwards my previous posts (see these tutorials here as well as here)
• to alter the seat of comments count, increase/decrease the values (3 & 10) from padding-top as well as padding-left
• to alter the seat of comments bubble/icon, alter the values (10 & 7) from margin-left as well as margin-top

Step 4: Now Save the Template as well as you're done!

If yous savour reading this blog, delight portion as well as subscribe. For whatsoever questions yous may have, hold upwards out a comment below.

Share this post