Today I am sharing a very simple CSS trick 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,you can see a screenshot below in image.To apply this trick to your threaded comments,you just have to copy and paste some CSS code in your template and you are done.So without waiting anymore lets jump to the tutorial.




How To Add Numbers To Blogger Threaded Comments?


  1. Go to Blogger Dashboard > Template
  2. Download a copy of your template
  3. Click On Edit HTML
  4. Hit Proceed
  5. Now search for below code,

]]></b:skin>

add below 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;
}

Now save your template and you are done.

Customizations


  • Line Number 11 - Edit it to adjust the position of text(number) from left size
  • Line Number 12 - By editing the value you can adjust the position of text(number) inside bubble from top.
  • Line Number 13 - If you want to change the bubble image then simply replace image URL with yours.
  • Line Number 14 - By editing this value you can adjust the position of bubble from top
  • Line Number 15 - Increase or decrease the value as per your requirements

Below I am sharing some comment bubbles,right click on any bubble,select Copy Image URL and replace it with above comment bubble URL in line number 13.


how to blog    blogger blogspot    blogspot blogger, how to blog    widget blogger blogspot    blogs, how to blog     blogspot or blogger, how to blog    tutorials, how to    comments, how to, blogspot blogger    new comment, how to blog    blog design, blogger blogger.com                   bubble comment count, bubble blogger posts   blogger comments, comment count    blogger blogspot, blogger comments   blogger bubble comment count   comments in blogger titles    blogger tips, blogger tricks   blogger widgets, bubble comment count    bubble comment count    Bubble Comment Count    Bubble Comment Count, blogger blogspot                                


I hope you enjoyed this post.If you are facing any king of problem then feel free to share it with us.Credits for this trick and comment bubbles goes to Helplogger if you want to share this trick with your readers then you have to add a link to this blog.

Post a Comment

  1. Thank you, it looks great.

    ReplyDelete
  2. Replies
    1. Thank you for this :)
      visit: indo-tronic.blogspot.com

      Delete
  3. hi rahul this is my first comment on your blog is really good tutorial and I can apply it on my blog,
    I am loyal visitors to your blog
    rio Manihuruk introduce my name from the Indonesia country
    one of which was made ​​in my blog comment box which can be answered immediately and I managed to install after reading all the instructions you give

    My next question is how to add a small picture symbol on the right corner of comment box which reads admin who said small diameter end of your comment so it can distinguish the blog owner's comments and comments
    I've got and see all the tutorials on other blogs but I do not really like because of excessive
    I like the look of your comment box is simple and beautiful look

    please answer my question because I just made ​​my new blog and blogger in the world
    because I've seen all your posts and have not found a tutorial
    thank you
    rio Manihuruk

    ReplyDelete
  4. Really Nice Widget Thanx for Sharing It :D Hope to get some more updates from you...

    ReplyDelete
  5. We are focusing on what they can do for you as targeted woman.cheap stun guns Women are more at risk. Statistics show that most violence is done by men, and most have a preference of a female target. Because, most but not all females are the physically weaker sex, stun gun flashlightsand these men that are hoping to do violence, commonly want a weaker adversary. Someone they can control and dominate. With a non-lethal weapon you can reduce the risk that you will be viciously beaten or killed when walking to your car at night, K95 stun gunor taking an evening walk in your once safe neighborhood.

    ReplyDelete
  6. thnaks for information

    for more new blogger information visit here

    clich here saini blogger

    ReplyDelete
  7. hey can u tell me how to add comment thread like u

    ReplyDelete
  8. It`s not showing in my blog.
    plz chk it
    allaboutpuzzles.blogspot.in

    ReplyDelete
  9. http://www.villagefile.com/
    pretty

    ReplyDelete
  10. That's really an awesome post

    Akhil Abraham
    Blog:All Blogging Tools.com

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete
  12. my classmate's step-mother got paid $12684 a week ago. she been working on the laptop and got a $446600 house. All she did was get lucky and profit by the clues exposed on this website http://Run19.com

    ReplyDelete
  13. just as Ellen replied I'm alarmed that people can make $8963 in 1 month on the computer. did you read this web site http://www.taz3.com

    ReplyDelete
  14. Really nice tips man. Thanks for sharing it.
    I am thinking it to implement it on TechClause.

    ReplyDelete
  15. Its or working... Why? Can you give me an explanation ? ilmumum.blospot.com, it's in Indonesian, you can translate it, Thanks !

    ReplyDelete
  16. Mmm...*not working i mean. Mmm...okay i know my false. Thanks, Grea !

    ReplyDelete
  17. I wanted to thank you for this great read!! I definitely enjoying every little bit of it I have you bookmarked to check out new stuff you post.
    Medical Billing Services

    ReplyDelete
  18. Thank you so much.This will very helpful to my Best Movie Torrents Blog.

    ReplyDelete
  19. This comment has been removed by the author.

    ReplyDelete
  20. option of proceed is not coming in my template what to do

    ReplyDelete
  21. awesome and beautifull.
    thanks.

    http://impoint.blogspot.com

    ReplyDelete
  22. just need gprs tricks like http://www.tehcotips.in

    ReplyDelete
  23. very nice
    http://www.mobile9plus.com

    ReplyDelete
  24. Thank you! really nice to see numbers for comments!

    ReplyDelete
  25. The Love Section (2013) UNRATED WEB-DL 720p 700MB Free Movies
    http://01822555341.blogspot.com/

    ReplyDelete
  26. Hi, Are you well?

    This is a effective website on www.helperblogger.com.This is website many many everyone help for us.It is very good website.So nice,this is a nice post.I also want to show about on Click-n-earn Get Compensated Paid to click advertising and view sites, Get Compensated To Improve, Buy Cost-effective Banner Marketing PTC Marketing Email promotion, Cost-effective ad Marketing, Cost-effective PTC Marketing, Produce Cash On the internet, ways to make online, Get Compensated For Website Strikes work from home USA And More. Try It Out Today!

    Thanks For Only You Create That cute Article.

    ReplyDelete
  27. It is such a good trick for bloggers
    Visit COMPUTER TIPS WORLD BD for some tips about computer.

    ReplyDelete
  28. Guys just sharing, I've found this interesting! Check it out! http://www.everypremiumpro.blogspot.com

    ReplyDelete
  29. Career and social networking online resources. Where to network online as part of your job search and how to use a social network to help land a job.

    ReplyDelete
  30. It also captures the attention of other webmasters who are looking to create their own content with contextual links to your site.


    What is white hat SEO

    ReplyDelete
  31. Shelter, this UserReport plugin appears to be quite fascinating. It's going to be beneficial to gather some individual details and possibly for you to send out these people ezines along with other beneficial data.

    Regardless, when you don’t brain giving, When i ask yourself what equipment does one utilize to try and do this e-newsletter operations, mailing along with stuff like that?

    http://www.yourwidgetworld.com/2013/06/top-5-free-blogger-templates-2013.html

    ReplyDelete
  32. This is a effective website on www.helperblogger.com.This is website many many everyone help for us.It is very good website.So nice,this is a nice post.I also want to show about on Click-n-earn Get Compensated Paid to click advertising and view sites, Get Compensated To Improve, Buy Cost-effective Banner Marketing PTC Marketing Email promotion, Cost-effective ad Marketing, Cost-effective PTC Marketing, Produce Cash On the internet, ways to make online, Get Compensated For Website Strikes work from home USA And More. Try It Out Today!
    phuket web design

    ReplyDelete
  33. Muchas gracias, Friend........

    ReplyDelete
  34. Your article is very informative, specially to the new individual entering to the field..... But I expect a little more detailed explanations for making the topic more clear for the common readers…. Sorry if am wrong.... Make Money , Blogging Tips

    ReplyDelete
  35. This comment has been removed by a blog administrator.

    ReplyDelete
  36. This comment has been removed by a blog administrator.

    ReplyDelete
  37. This comment has been removed by the author.

    ReplyDelete
  38. Now this is in actual fact cooperative. It’s very openhanded of you to share this with us.
    Business Competition

    ReplyDelete
  39. Yea, that's great. thanks for giving me very greatful by reading youre article. there are so useful for me..
    thankyou
    by


    planetharga

    ReplyDelete
  40. This comment has been removed by the author.

    ReplyDelete
  41. Yeah WOW! another great Post has been published by you. actually i am also searching this type of Post from somewhere but i got it.
    Thanks :)
    Blogging Guide

    ReplyDelete
  42. the specific Pay day upgrade whereas Dimensions Loan from the bank is else a surprising item what is any results will payday loan mobile modify shifted people every and each day. whenever crises happen, look filter men and girls.

    ReplyDelete
  43. This style works to the advantages of the businesses that issue credit cards, as they keep earning interest on the late payments created by you. Personal loans usually create a stronger choice, however qualifying for such loans is pay day loan near me at chicago kind of cumbersome, needing plenty of your time and a close check of your credit score before any answer is given.

    ReplyDelete
  44. Very much useful information which helped me gain something knowledgeable. By Arthisuresh

    ReplyDelete
  45. There are so many different aspects when it comes to this topic. Thank you so much for sharing your knowledge on this particular aspect.
    graniet tafelblad

    ReplyDelete
  46. thanks, its really helpful, really an awesome post..

    learn SEO


    seo training in bangalore

    ReplyDelete
  47. The best jewellery shop in online that will help you get shipped products in any country within short time is Billingstation.
    http://www.blingstation.com/ offers Jewelry for women and many more large collections of Accessories.

    ReplyDelete
  48. Buy silver bangles online for women and give elegance and style for your looks. This ornament match with the most different occasions from parties to office.

    ReplyDelete
  49. for latest videos,teasers visits http://www.latestnewmoviesteaser.com/

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top