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
LIVE DEMO
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>
</b:if><!–COMMENT-BUBBLES-STOPS-http://bloggerstop.net–>

Now find this code in the template:

</head>

And immediately ABOVE/BEFORE it paste this code:

<!–COMMENT-BUBBLES-STARTS–><style type=”text/css”>
.comment-bubble {
float: right;

background: url(http://i49.tinypic.com/2vugahu.jpg) no-repeat;
width: 55px;
height: 38px;

font-size: 18px;
margin-top: -15px;
margin-right: 2px;
text-align: center;
}
</style><!–COMMENT-BUBBLES-STOPS-http://bloggerstop.net–>

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“]:
Add Comments Bubble To Post Titles In Blogger Add Comments Bubble To Post Titles In Blogger Add Comments Bubble To Post Titles In Blogger Add Comments Bubble To Post Titles In Blogger
Add Comments Bubble To Post Titles In Blogger Add Comments Bubble To Post Titles In Blogger Add Comments Bubble To Post Titles In Blogger
Add Comments Bubble To Post Titles In Blogger Add Comments Bubble To Post Titles In Blogger Add Comments Bubble To Post Titles In Blogger Add Comments Bubble To Post Titles In Blogger

Add Comments Bubble To Post Titles In Blogger Add Comments Bubble To Post Titles In Blogger Add Comments Bubble To Post Titles In Blogger Add Comments Bubble To Post Titles In Blogger
Add Comments Bubble To Post Titles In Blogger Add Comments Bubble To Post Titles In Blogger Add Comments Bubble To Post Titles In Blogger
Add Comments Bubble To Post Titles In Blogger Add Comments Bubble To Post Titles In Blogger Add Comments Bubble To Post Titles In Blogger Add Comments Bubble To Post Titles In Blogger
Finally save the template.

Leave a Reply

34 Comments on "Add Comments Bubble To Post Titles In Blogger"

Notify of
avatar
Sort by:   newest | oldest | most voted
Peter
Guest

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

View Comment
Divya Sai
Guest

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

View Comment
Poras
Guest

Thanks Divya Sai

It Is Working Fine In My Blog

View Comment
Blogger Template Place
Guest

hey dude…. thank for your trick.

It nice.

Best Regard

View Comment
Avi Singh
Guest

Thats cool divya

View Comment
Sara
Guest

thank you very much

View Comment
Kashif Arif
Guest

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 widget…you didn't answer

View Comment
Divya Sai
Guest

@kashif
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.

View Comment
Kashif Arif
Guest
Divya…I ask about both…. Now I repeats my questions 1. I use "CONNECT WITH ME" widget in my two blogs… http://uniquelikeme.blogspot.com http://qur-aninhindi.blogspot.com 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 dsai588.stumbleupon.com 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"… Read more »
Divya Sai
Guest
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. dsai.588.stumbleupon.com 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… Read more »
Kashif Arif
Guest

thanx a lot for dis quick reply……

View Comment
SEO Company Pune
Guest

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

View Comment
Thinks Why Not
Guest

hi,

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… 🙁 :-/

View Comment
Divya Sai
Guest

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?

View Comment
Thinks Why Not
Guest

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

View Comment
Divya Sai
Guest

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 (BloggerStop.net), 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.

View Comment
Thinks Why Not
Guest

done…

but comment text box not appears…..

View Comment
Divya Sai
Guest

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.

View Comment
Maey
Guest

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

View Comment
Peter
Guest

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

View Comment
wpDiscuz