How to add Numbered Comments On Threaded Comments For Blogger/Blogspot

Today we'll learn how we can add numbered comments along with comment bubbles on our threaded comments too.

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 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:
count comments, comment bubble, forum, blogger

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

Steps to add bubble comments count:

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


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

]]></b:skin>

Add 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;
font-size: 22px;
color: #555555;
padding-left:10px; 
padding-top:3px; 
background: url(
http://3.bp.blogspot.com/-f6ByQfbwApQ/T4x_8p1FGpI/AAAAAAAAB2A/WJKf-ybmvQk/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:
  • 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 previous posts (check out 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) frommargin-left and margin-top
Step #3Now save the template and you're done!

 If you enjoy reading this blog, please share and subscribe. For any questions, leave a comment below. 
Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

2 comments

  1. I really hate home staging. I used to do it, but stops when I got busier because I hate it so much! Funny that you sort of feel the same way.
    Cheap NFL Jerseys
    Cheap Jerseys

    ReplyDelete
  2. Thanks for this giveaway opportunity and congrats on your 100th post! I love surprises!
    Wholesale Jerseys

    ReplyDelete

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
Posts RSSComments RSSBack to top
© 2011 Tips & Tricks Zone ∙ Designed by And Powered ByMD SOH@G
Released under Creative Commons 3.0 CC BY-NC 3.0