How to add comment bubble beside post title(heading) in Blogger/blogspot blog?

Today, I am going to teach how to add comment bubble beside each post title in Blogger blogs. Usually in default Blogger templates or in the theme that I’m using for my blog, you can see the number of comments shown below the post title is in this form: 3 comments. But, to make it look more professional we can use comment bubble where the comment number is shown inside a “Bubble” like shown in the image below.

I’ve used this comment bubble in my latest template, Pro Indexer. Before start editing your template save a backup of it first. After that, follow these easy steps below.

1. Go to Layout > Edit HTML > Click on “Expand Widget Templates”

2. Search for this code in your CSS. It is usually found at the end of the CSS section.

]]></b:skin>

3. Replace that code with the code below.

/*——Commment Bubble Start——*/

.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(http://2.bp.blogspot.com/_b8IA1ajBJG8/S5tPt3thJoI/AAAAAAAAAy4/GMCCicK-kaw/comments-1.gif) no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
padding:0px 0px 0px 0px;
}

/*——Commment Bubble End Introblogger——*/

]]></b:skin>

4. Now search for

<h3 class=’post-title entry-title’>

and you’ll eventually see the whole bunch of the codes below.

<b:includable id=’post’ var=’post’><div class=’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.link’>
<h2><a expr:href=’data:post.link’><data:post.title/></a></h2>
<b:else/>
<b:if cond=’data:post.url’>
<h2><a expr:href=’data:post.url’><data:post.title/></a></h2>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

5. Immediately next to the <h3 class=’post-title entry-title’>, paste the piece of code below.

<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>

And now the edited code will look like this.

<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>

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

And you are done. Click save template.

If you don’t like the default bubble that I’ve provided, you can use your own. All you’ve to do is just replacing the source link of the image( red colour in CSS ) and adjusting the width and height (Blue colour in CSS) of the bubble accordingly. If you don’t know to do it, you can leave a comment below this post or send me an email. I will reply to your question in 24 hours time.

Here, I’ve attached a link where you can download a collection of other bubble images, so that you don’t have to waste your time search for bubble images.  You can upload those images to Blogger, read about it here.

Download Comment Bubble.zip
Download Comment Bubble.rar

18 Replies to “How to add comment bubble beside post title(heading) in Blogger/blogspot blog?”

  1. Very informative article for blogger nice trick how to add comment bubble beside the post. Great shearing.

  2. @World Best Blogger Templates

    Thanks for your compliments on my article. I will continue posting more informative articles and tutorials. And again thanks for your support.

  3. I have been visiting various blogs for my term papers writing research. I have found your blog to be quite useful. Keep updating your blog with valuable information… Regards

  4. Hello, I need to change the color of the font.
    I want green font.
    I'm using the bubble 15.
    Can you help me please?
    Thank you very much

  5. Lyya, can you send me a copy of your template? Go to Layout>Edit HTML> click "Expand Widget Templates > COpy the code inside the box > save it in WORD DOCUMENT and send to my email….

    thegreatrat@gmail.com

    I will look at your template. And please provide your blog URL…

  6. Lyya, your problem solved.

    Go to Layout > Edit HTML > Click "Expand Widget Templates.

    Then find for this code

    <b:if cond='data:post.url'>

    Immediately before that code..add the following code.

    <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>

    And click save. Done

  7. Its cool….i would like to know how to create the message come on the image while mouseover….as you did "Click here to share…"

    visit my blog its photo (http://forward2friends.blogspot.com) based….I will really appreciate if you let me know about that…

    Thanks & Regards
    Forward to Friends

  8. Forward 2 Friends,

    That is a widget from WIBIYA. Do you see the toolbar down there? Under the page. The "CLICK TO SHARE" comes with it in a package. All you have to do is just register at

    http://www.wibiya.com

    customize the applications on toolbar and get the code and paste it in your blogger template.

    I love WIBIYA… =)

Leave a Reply to Word Best Blogger Templates Cancel reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.