How To Add Numbers To Blogger Threaded Comments

Customizing your comment box is somewhat tricky in order to let your readers drop a comment to your post.One of my previous post features on how to customize author's comments background  comments box but it doesn't contain any numbers to distinguish how comments being dropped in that particular post.  Today I will share to you  a  simple CSS tweak which will add numbers to your threaded comments inside a comment bubble.It will add numbers like this way 3,3.a,3.b & 4 here 3,4 are the main comments and 3.a,3.b are the replies. In order to apply this trick in your threaded comments, you just simply follow the simple steps below!

blogger threaded comment bubble


Add Numbers To Blogger Threaded Comments


Step 1. Go to Blogger Dashboard
Step 2. Hit the Template buttom (have  a copy of your template and save it in a safe place)
Step 3. Click On Edit HTML
Step 4. Now search or Control F for the code below
]]></b:skin>
Step 5. Just above that code in step 4 place the following code below
.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUnwmT_NvmM4LZmzIyvXQy7GufnX9yDju79oP48oaAfAlwmRZEvnR3qHrylXjKE95if2XYFuu9LZG4Y1MsJtl__nA5SFDQfkreOzAvDsRFoInRrEE_o5RPzX8atADZHBGjVKRaRA_ZIDNF/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;
}

Step 6. Save your template and congrats! Enjoy ;-)

Customization:


  • To adjust the position of text (number) from left position, edit the value (padding-left: 10px)
  • By editing the value ( padding-top: 3px ) you can adjust the position of text (number) inside bubble from top position.
  • By editing the value attributes ( margin-top: 7px ) you can adjust the position of bubble from the  top position.
  • Increase or decrease the value ( margin-left: 10px ) as per your requirements in order to adjust the position of the bubble from the left position.
  • If you want to change the bubble image then simply replace image URL with yours. Or you choose one of the url below to replace your comment bubble image.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglyaAEf0G66O1CvudnWV8a05hT_zSowr65AzZ9AFh8JB3ANkBudrkTqe3GwCjww-Ed9tW-9LVfURqRYh00Y_dXlJ4Fxv1ASaH38l9lqMf_Bk_phTaKscFpVHjdOUrx2MHIIJtT0SVYbPU/s1600/devil+comment+bubble.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheNX3IS6xZOYOiYfaXS8cMsdtD7iHk-WM1MbIC44gjkH2ZRR_e2qPHpZzcA-CVoB5SWara1BAUPG-3xAkgjtvrGC01Zigeyd0QZ471cQK_8JlN4Q86yWDf3LQBJJ92oGiChOt9FD2HNhY/s1600/text_comment_bubble_comments.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht999MNM0JO-WvVgEfMTDqpXB2COaVGeQJr0uUI2zA_6AErRee8MAFvB5bsvNDPPaLxUZCGIYW44BWqh29CVQZlnknkZfbz9WjLk9kdpXvpAj-J6aU3zsLBJcbnI9RiEDyQLUKydKOhZg/s1600/comment_bubble.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF14o0Rs3ghlfu5ivRE-ILyTHIbPtFuyYWYMdVu_QaJ6NYKHMkPOZyw0pHbYBloaxW56B-DIWJieICOqtk25eox2u5IrZ4dvi0TJiy2zLQeEKDTNahQpAFNCcdZlgYjLGQWf5M_q6zpjs/s1600/bubble+comment.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidC7eadQ3na6umIPFBmIm8Wb1Dzdt-XGF1oiFdQlme7IEHVSwH7W2GdbCiBH30-JpmzGX2YMYqE4GmYMgOxFKZxExvFYJCoX3XmlDzb2MLZQUhURK0T6-i2PiTJF53WgHNoXTBSZAdXGU/s1600/comment+bubble+red.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgssmIkywtS7thyZsu6zAOu2yCjM2Roy8_Q02L8_AiMJG6PROARFy365yv0jfBC81d6kg0KMaGhv6Ls-feOSiZHXmckjxZ2F5stuCkiyomFbNnItpcgccShDzGTgeiEzAfxB3Se8ixlL9k/s1600/heart+1.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb3uG-bSsUQgSsUTznUUNHhh8PwM0dgIurJCXP0VPWHXnVk1L-aTik-Z6FKoZ7S4pVcb6maKh6ib8n5OJ8_bn7OvphahIEVYngPI1Kqzlq4I2xE3N3hz-JW8vZ4ZfPwH8Omk9cg97APvk/s1600/pink+bubble+icon.png

I would say thanks  to helperblogger for the initial codes in this tutorial.





About the Author:
tilt  hover effect
Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
Follow him @ Twitter |Facebook

No comments :

Post A Comment!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

GOLDEN WORKS TV

Related Posts Plugin for WordPress, Blogger...