Add Comments Bubble To Post Titles In Blogger

A few days back I published a tutorial on how to add numbering in comments in Blogger blogs. Now this tutorial will add comments-bubble icons to your post-titles displaying the total count of the comments.

comment bubbles in Blogger


Instructions to follow:

STEP #1:
Log in to Blogger, go to Layout -> Edit HTML
And mark the tick-box "Expand Widget Templates"

STEP #2:
Now find this in the template:
<h3 class='post-title entry-title'>

And immediately BELOW/AFTER it, paste this code:
<!--COMMENT-BUBBLES-STARTS--><b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>

Now find this code in the template:

And immediately ABOVE/BEFORE it paste this code:
<!--COMMENT-BUBBLES-STARTS--><style type="text/css">
.comment-bubble {
float: right;
background: url( no-repeat;
width: 55px;
height: 38px;
font-size: 18px;
margin-top: -15px;
margin-right: 2px;
text-align: center;

Edit the code in RED to change the image being used in the hack.
IMPORTANT: You may use any image instead of the one linked in the code above (STEP #3), but you have to mention its dimensions correctly (width and height) for correct placement of numbers on the image.

Comment-Bubbles you may use for this Blogger hack [Right Click and "Copy Image Address/Location"]:

Finally save the template.

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Next Post »


Write comments
January 09, 2010 2:47 PM delete

A quick comment before I get redirected to some myspace page. Why does this happen?

January 09, 2010 2:49 PM delete

Hey Peter, couldn't get you. There's no redirection script in my blog, it may be some virus in your pc...not sure.

January 10, 2010 12:15 AM delete

Thanks Divya Sai

It Is Working Fine In My Blog

January 10, 2010 12:41 AM delete

hey dude.... thank for your trick.

It nice.

Best Regard

January 11, 2010 12:04 PM delete

thanx divya.....for dis lovely hack

can please tell me how can I put sharing buttons in my blog just like you put it?

& i ask you some question about change opacity image didn't answer

January 11, 2010 12:20 PM delete

You mean "share this post" buttons or "connect with me" buttons? And plz remind me your doubts wid opacity hack as I have missed them.

January 12, 2010 11:22 AM delete

Divya...I ask about both.... Now I repeats my questions

1. I use "CONNECT WITH ME" widget in my two blogs...

In your blog it's showing 9 items but in mine it's showing only 7??? So how can I add or change these logo's???

2. In "Stumbleupon" your account showing as but mine is showing as a stumbler.....

how it's possible??

3. This is one about "SHARE THIS POST" how can i add share post or "subscribe for my feed" just below my post?????

4. This is one about "tweet this post"....just like your post have "TWEET ICON" in start of the can i add this icon in my blog????

Kindly please reply

January 12, 2010 11:43 AM delete

1. In "connect with me" widget, the hack used is linkopacity. This is not limited to 7/9 images, use your imagination and try this hack in any of your images on the blog. Just add the class="linkopacity" to any image and it will fade out. Similarly you can replace those default buttons that I have used with any of your images, by changing the image source (src).

2. will also redirect to stumbler/dsai588. SU has recently changed its members urls. It has been done to decrease the number of ever increasing sub-domains and therefore new users are just being given a new directory instead of a sub-domain.

3. Use this collapsible tabbed widget, read part - 1 too. And in one of its tabs add bookmarking buttons of your choice just as I did.
To put this widget below posts, read this post (just read about the code where you have to place that collapsible widget): Social Bookmarking Buttons

4. Tweet or Retweet Buttons code

PS: Please search the blog for the articles to access the hacks/tutorials easily and quickly.

January 12, 2010 12:36 PM delete

thanx a lot for dis quick reply......

January 23, 2010 6:53 AM delete

Thanks for your site master who put all the design in a single site and we like all the design ....

January 26, 2010 1:42 AM delete


after doing this.. it worked fantastically...

but when I remove it.. comment text box is not getting loaded... why is that... when I checked some other blogs, same problem encountered... Cant comment is few blogs, but others r commenting...

I tried different browsers as well situation is same... :( :-/

January 26, 2010 1:51 AM delete

Hi there,
Couldn't get your problem. I checked your blog and the bubble is showing up neatly. What exactly is the issue, can you plz rephrase your query?

January 26, 2010 2:07 AM delete

thanks for checking.. now I once again added the bubble.. no problem with that...

my problem is The text box where we write comments is not loading.... I checked with other blogs, few working and some are not.. if u give me ur email.. I can email u the screen shot...

once again thanks for the help.. :)

January 26, 2010 2:24 AM delete

okay got your point.
But this code cannot affect the comment-form. Even while deleting/removing the code, you cannot even accidently delete the code for comment-form. I have clearly marked the starting and ending of the code used in this tutorial.

Moreover I personally try all tutorial in this very blog (, and after checking the code I have deleted it, but as you can see the comment-form is not at all affected.

Rather than sending a screenshot, delete the code and let me check your blog itself.

January 26, 2010 2:29 AM delete


but comment text box not appears.....

January 26, 2010 2:57 AM delete

The comment-form is visible to me (mailed you the screenshot), I am sure the problem is something with your internet browser, try some other Internet browser like opera/IE/Chrome/Firefox, and you'll see the comment-form in its place. Clear the cookies/temp. files etc. in the Internet browser where you are currently working.

February 10, 2010 12:18 AM delete

I Like It!!!!!:D
Its work!!!!:))
Thank you soooo much!!!!!:X

March 28, 2010 12:57 PM delete

Hi! Off topic a bit but here goes.

Please, how do I display HTML code as text on my blog as you have done in the grey quote box?

Kind regards,

March 28, 2010 1:14 PM delete

Hi again! No need to reply, I found my answer on one of your other posts!

Thank you,

May 02, 2010 9:39 AM delete

Hi! I have that other comment widget of your added on my blog. It was working abosolutely fine till I add DISQUS Comment widget in my template. I want to keep disqus widget and your widget too. Is there any solution for this problem? for example you can see my post - This post is getting updated everyday. So it considered as latest post for Disqus comment widget. you can see, in previous posts, your widget is working but in this post it is not working. In fact, you will see Disqus widget's own words 'अभिप्राय-' before the post title.

Thank you.

May 02, 2010 12:26 PM delete

Hi Kanchan, sorry couldn't get you. Which widget are you talking about?

May 03, 2010 3:19 AM delete


Normally I follow your blog. If you have not given this widget on your blog then pls forgive me for this comment.

I have a widget -"Show comment bubble beside the post title", I guess that is taken from your blog. . This widget is wroking fine. But now I have added 'Disqus' comment option for individual reply. And now, for all the latest post "'Disqus' comment option" will work beside the post title. But for all the previous post "Show comment bubble beside the post title" widget is still working fine.

So I would like to know, is there any solution where I can keep 'Disqus' comment option for individual reply only and "Show comment bubble beside the post title" widget working for all the latest post as well.

PS: For reference you can see my two posts titles.
1. - Here you will see Disqus comment option working beside the post title. (This is a latest post - After adding Disqus comment option).


2. - Here you will see "Show comment bubble beside the post title" widget working. (This is a previous post without Disqus comment option.)

May 03, 2010 8:14 PM delete

Is there anyway to have text also appear on this? As in '0 COMMENTS (or etc.)' ???

May 04, 2010 1:34 PM delete

Yes that is possible Sarah, but you'll have to adjust the settings, like width, padding etc.
Basically you have to use this code:
<data:post.numComments/></a> Comments

Instead of this one:

but of course as i haven't chkd it on any blog, so you have to try some different values for width, margin-right etc.

May 26, 2010 7:23 AM delete

Hey dude, i wants to know that, i've applied this hack..
n it works well..

bt now i wants to apply the Disqus comments..
n while applaying this, the comment bubble do not works..

So now tell me that how can i get out of this...
waiting for ur reply...

June 08, 2010 4:30 AM delete

thanks a lot man. for this help.
i tried a solution from another site, which was not working at all. yours is working from the first try !! great.

June 30, 2010 4:59 PM delete

Hi, thanks a lot for your great tutorial! I'm teying to add the word "comments" in the bubble, huat under the number but I'm not able to achieve this. Can you please help me? Thank you :)

August 23, 2010 11:32 AM delete

hey there.I have a question:i use Disquis form comment on my blog,after i added your widget it shows me in bubble 0 comments.Is there a way to show me the number of comments for Disquis?

August 24, 2010 6:27 AM delete

Yeah the value will not appear if you are using any other comments platform :(

October 13, 2010 4:56 PM delete

Part of my comment bubble is getting cut off at the top, but only on my top blog, why is that?

September 05, 2011 6:39 AM delete

this is so cool and it has very different style, i like it and it is looking very cool and also the information it has is aw sum

SBS 2008

September 02, 2012 9:23 AM delete

Hello, unfortunately this doesn't work for my blog...
I don't see the comment bubble
I have a facebook comment box, does that have anything to do with it?

can you help me out?


Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon