Add Bubble Comment Count on Blogger / Blogspot Blog

If you are a new blogger and you want to develop your own template according to your own specification, then don’t miss to add a small bubble in front of your blogger comments count area. It will make your blog more attractive to your visitors.

You can see in below screen shot

add bubbleIf you want to add the exact bubble in your blogger blog, then you have to add a simple code in your blog Template code, you will be able to see this beautiful in your blog.

Login to your blogger “Dash Board”

Click on “Layout”

Click on “Edit HTML” and a give tick to “Expand widget Template”

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( no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;

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=''/>
<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=''>
<a expr:href=''><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 to see if every thing is correct. If every thing is ok, then click on Save Template button and now you can see that a beautiful bubble has been added to your blog posts comment count area.  You can also create your own image, instead of adding the above image, you can add your own image. Whatever you want to add. Just create a image and then upload it to any image host website. Copy the link and paste it here, instead of the above one.

Click Here to Leave a Comment Below 17 comments
Hetal Patil - December 8, 2009


I tried this hack, but for me bubble is coming in on extreme left instead of extreme right. Please help.

    Rohit Langde - December 8, 2009

    I saw your blog, It’s working perfect. Bubble is on right side of the post title.
    Make sure you have added float : right; in the given code to be pasted.

      PLA - December 27, 2009

      hey , i have a question ;
      this code does not excist in my template :

      where can i add it then???? Please i really want to know it.

        Sarah @ The Ugly Duckling House - February 8, 2011

        I found that if I replace the position: absolute with position: relative, my bubble appeared to the right instead of to the extreme left. Thanks!

anandharaja - December 23, 2009

this is the nice hack but the bubble is appear in the extreme left, how can i change the position of bubble.

Speed dating nyc - January 14, 2010

really cool feature, Im going to try to apply it now.

Aidil FS - January 25, 2010

Hey, it worked.been looking for this all over the place.Clear instructions. Thanks a lot.

Noor - May 2, 2010

Asalam Alaykum, I want to add the bubble but below my post where next to where comments already are, how would I do that? Thanks..

ishan - June 4, 2010

One of the main feature of using third party comment system is Reply option to comments which blogger lack.
I recently saw this tutorial on How to add reply option to blogger comments and thought to share with you

Product review - December 31, 2010

If you want to add the exact bubble in your blogger blog, then you have to add a simple code in your blog Template code, you will be able to see this beautiful in your blog. And you will search product online internet marketing.

Ivf in India - February 2, 2011

will make sure to return for more advice. Keep it up!

Surrogacy In India - February 2, 2011

Intresting post, i really enjoyed reading it

Kanan - April 5, 2012

I’m using IntenseDebate on my blogger blog
Will it work for me or will I have to make a few tweaks in code??

    Rohit Langde - April 5, 2012

    The code given is fetches comment count from Blogger. If you have know-how about IntenseDebate API, you can tweak code yourself.

Mark Teller - April 23, 2012

I am able to find and replace the early section — ]]> — but not the later one — . I do have a custom template, but was not aware that I had done anything so extreme as to remove the comments. Currently the comments show up with frames, but the foreground is perhaps transparent — ? Let me know if you can help. Thank you!

Level 70 Mage - Warsong Gulch - August 31, 2012

I do not even understand how I finished up here,
but I assumed this post was once great. I don’t recognize who you’re however definitely you are going to a well-known blogger if you aren’t already. Cheers!

Airstream rentals - December 20, 2012

I really like the idea of the bubble for comments. Thank you so much for explaining the steps as well because they will greatly help a new blogger like me.


Leave a Reply: