Add Bubble Comments Count in Blogger Post Title

Add bubble comments count near your each of you post title can make make your blog more attractive to your visitors. If you are a new blogger in blogging era and want to design your own customize template or modify the existing one, this tutorial is for you. so let's go ahead and add a small bubble comment count in front of your blogger post area. find working demo on this blog :)

Add Bubble Comments Count using CSS in Blogger Post Title
This tutorial will add comments bubble icons to each of your post titles displaying the total count of the comments for that post. You have to add a simple code in your blog Template code, you will be able to see this beautiful in your blog.

Steps to add bubble comments count:

STEP #1: Log in to your blogger “Dash Board”. Navigate to Layout > Edit HTML section and a give tick to “Expand widget Template”.

layout edit html expand widget template
STEP #2:
Find ]]></b:skin> in your template code and place the below code just before ]]></b:skin>
.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(http://1.bp.blogspot.com/_1fRuBdlSpLw/S-_7DPCITWI/AAAAAAAAAXU/EBCsy37ga2U/s1600/Comment+Bubble+%2815%29.png) no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
Note: To Align bubble image right of the title remove position:absolute; line from #step 2 code.
Now find the below code and add the red code inside the code.
<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'><b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>

<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>

Now click on Preview button and have a look at your post first, if every thing is correct then save template and done. Instead of adding the above image, you can add your own image or you can choose one of the image given below.
IMPORTANT: You may use any image instead of the one linked in the code above (STEP #2), but you have to mention its dimensions correctly (width and height) for correct placement of numbers on the image.
To use this images [Right Click and "Copy Image Address/Location"]
Bubble Comment Count in bloggerBubble Comment CountBubble Comment CountBubble Comment CountBubble Comment CountBubble Comment CountBubble Comment Count for bloggerBubble Comment CountBubble Comment CountBubble Comment CountBubble Comment CountBubble Comment CountBubble Comment CountBubble Comment CountBubble Comment CountAdd Bubble Comment CountShow Bubble Comment CountHow to add Bubble Comment Countbubble comment bloggerbubble comment bloggerbubble comment bloggerbubble comment bloggerbubble comment bloggerbubble comment bloggerbubble comment bloggerbubble comment bloggerbubble comment bloggerbubble comment bloggerbubble comment blogger

So what is the output? are you succeed and get a bubble comment count on your blog?

37 Responses to "Add Bubble Comments Count in Blogger Post Title" - Leave a response

  1. AdiDogs | Singapore May 18, 2010 at 12:49 PM
    Hi, it works! ThanX! But how can i change the font size, font colour and mouse over colour? Now is the same with the post fonts and colour. Pls help!!

  2. Best How To Blogger May 19, 2010 at 1:02 AM
    @AdiDogs, add this code (in .comment-bubble css class) for font color,
    color:gray !important;
    and for on mouse over color change use this,
    ..comment-bubble a:hover{color:red;}, or something like this :)
  3. web designer June 5, 2010 at 1:54 PM
    Nice tutorial. I'll try it to my blog and let you know the feed back soon. Thanks for everything.
  4. Sandrine June 30, 2010 at 11:36 AM
    Hi, great tutorial! It worked beautifully on my blog, I'd like to add "comments" in the bubble, under the number. I've tried different things but I can't achieve that, do you know how to add a word in the bubble? Thank you very much for your attention and all your tutorials.
  5. Blogger How To July 1, 2010 at 6:57 AM
    @ Sandrine: First of all if you will try to add add "comments" in the bubble, under the number it looks bad, but to show text "comments" beneath the bubble your code should look like this:

    <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/><br/><span style='font-size:10px'>comments</span></a>

    your bubble comments would be display same as i have in my blog :)
  6. jessica July 17, 2010 at 5:12 PM
    Thank you for this useful tutorial! Is it possible to remove the hover effect (on both title and comments bubble) wich appears while you move your mouse in the white space between the post title and the bubble? I mean, I'd like to see the hover effect only when I move the mouse right on title/bubble's text.
  7. Piyush - Admin @ Best How To Blogger July 17, 2010 at 11:24 PM
    @jessica, Go to your template Edit HTML section and find this code

    .post h3 a, .post h3 a:visited, .post h3 strong {

    Remove bold text from code and done :)
  8. deeperpolitics.blogspot.com July 28, 2010 at 10:56 PM
    I did it but when I preview my page it covers part of the post title, is there any way to avoid this?
  9. Piyush - Admin @ Best How To Blogger July 29, 2010 at 7:39 AM
    @deeperpolitics, Please put the code in your blog and let me show what part of your title is covered by comment bubble, i will fix it once you will put the code in your blog. Right now i have visited your blog but i haven't found comment bubble!!.
  10. DS August 5, 2010 at 8:40 PM
    Thank for this tutorial. It was great. But i cannot make the number of comments appear on the center of the bubble vertically.

    thanks in advance
  11. Piyush - Admin @ Best How To Blogger August 5, 2010 at 8:56 PM
    @DS, May i have your blog address please :)
  12. DS August 6, 2010 at 7:48 PM
    Of course. Thanks a lot.
    It a blog i'm working on, for a comic.


  13. DS August 6, 2010 at 7:50 PM
    As if you don't mind. Is there a tutorial to use custom buttons for home, previous and next post?
  14. Piyush - Admin @ Best How To Blogger August 8, 2010 at 12:22 AM
    1) To center the bubble comment count on your blog add this property padding-top:10px; in .comment-bubble class.

    2) Yes, there is a tutorial for creation custom buttons for home, previous and next links. Actually I know how to do it,so i will publish a post for you tonight. so wait and watch :)
  15. DS August 10, 2010 at 6:46 PM
    It's perfect now. Thanks a lot.
    I'll look forward for the other tutorial.

    Thanks again.
  16. Piyush - Admin @ Best How To Blogger August 12, 2010 at 8:25 AM
    @DS, Check now the other tutorial for Tutorial to use custom buttons for home, previous and next posts. I hope you will like this post also. Thanks for keeping patience.
  17. Himanshu August 13, 2010 at 6:14 PM
    The besthowtoblogger helped me to set up bubble
    but now am troubled again
    pls help
    my bubble is on the left side of title
    i want it at left like you helped "DS"
    pls tell me thanks
    see my blog at gadgetoxic.com
  18. Emily - Bentobloggy.com August 16, 2010 at 9:53 AM
    I would love this feature on my blog, but I don't seem to have that particular code in my template. Help? http://bentobloggy.blogspot.com/
  19. Piyush - Admin @ Best How To Blogger August 16, 2010 at 12:24 PM
    Give me admin rights and let me see your template code. visit this - http://besthowtoblogger.blogspot.com/p/help-desk-for-bloggers-ask-questions.html
  20. Piyush - Admin @ Best How To Blogger August 16, 2010 at 11:04 PM
    @Emily, You can check your blog now, i have implement the above bubble comment widget in your blog, you can change image address from above given images which fits better to your blog :)
  21. Nancy August 18, 2010 at 3:49 AM
    How can I add a "click to comment" hover text over the comment bubble in the post title?
  22. Piyush - Admin @ Best How To Blogger August 19, 2010 at 11:34 PM
    @Nancy, You can add onmouseover and onmouseout javascript code and modify comment bubble hover text.

    Below is my comment bubble code:

    <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/><br/><span onmouseout='javascript:this.innerHTML=&quot;Comments&quot;' onmouseover='javascript:this.innerHTML=&quot;Add New&quot;' style='font-size:10px'>comments</span></a>

    Hope you would like this. Let me know if you need more information.
  23. Anonymous August 21, 2010 at 5:07 AM
    i like it, but it's stuck on top of the text and move to the right side of the post!
  24. Piyush - Admin @ Best How To Blogger August 21, 2010 at 7:25 AM
    @Jojo, I have visited your blog and i guess it is working fine. Where do you want it to be display and how? let me know.
  25. Ify August 28, 2010 at 4:41 PM
    I had to remove the position:absolute before mine could float to the right. Though thanks still for the tut. Really appreciate.
  26. Ify August 28, 2010 at 6:29 PM
    One problem. when visitors comment on my blog the counts doesn't work. It just displays zero. So i dont know if am missing something

    http://secretofgreatachievers.blogspot.com thats my blog.

    please check it out. thanks and hoping to hear from you
  27. Piyush - Admin @ Best How To Blogger August 29, 2010 at 12:07 AM
    @Ify, i have visited your blog but don't find any bubble comment section right now. If you having any problem than let me handle it. visit :- http://besthowtoblogger.blogspot.com/p/help-desk-for-bloggers-ask-questions.html
  28. nesta October 22, 2010 at 10:56 PM
    Nice tut! i have a question though, how do i remove the comment count at the bottom of the post? when i configure blog post and uncheck it, the bubble disappears as well. oh and is there a way to like vertically align the text on the bubble? thanks!
  29. Piyush - Admin @ Blogger How To Tips October 23, 2010 at 12:51 AM
    @nesta, to remove that comments after post, can you give me admin rights?. See the details. http://bloggerhowtotips.blogspot.com/p/help-desk-for-bloggers-ask-questions.html. and regarding that horizontal align text i think you can do it, just play with css.
  30. Piyush - Admin @ Blogger How To Tips October 24, 2010 at 1:47 PM
    @nesta, your comment hyperlink is removed from bottom of the post, you can check that, Enjoy :)
  31. nesta October 24, 2010 at 5:38 PM
    thank you so much!great job!will be going here often for how-to's and tips!great stuff!
  32. Sunithi April 12, 2011 at 2:56 AM
    Thanks !! tried it out and it worked great!! Could not customise the comment though ... but even getting the bubble was great !
  33. Abhi April 30, 2011 at 4:27 PM
    It is the best website for blogger hacks...thnx a lot,i see these bubbles on so many websites and wanted it for my blog....thnx a lot..

Post a Comment

^ Scroll to Top