January 9, 2010

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"]:









Finally save the template.

34 comments:

Peter said...

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

Divya Sai said...

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

Poras said...

Thanks Divya Sai

It Is Working Fine In My Blog

Blogger Template Place said...

hey dude.... thank for your trick.

It nice.

Best Regard

Avi Singh said...

Thats cool divya

Sara said...

thank you very much

Kashif Arif said...

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

Divya Sai said...

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

Kashif Arif said...

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" in start of the post...how can i add this icon in my blog????

Kindly please reply

Divya Sai said...

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

Kashif Arif said...

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

SEO Company Pune said...

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

Thinks Why Not said...

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... :( :-/

Divya Sai said...

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?

Thinks Why Not said...

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.. :)

Divya Sai said...

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.

Thinks Why Not said...

done...

but comment text box not appears.....

Divya Sai said...

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.

Maey said...

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

Peter said...

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

Peter said...

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

Thank you,
Peter

कांचन कराई said...

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 http://www.mogaraafulalaa.com/2010/04/blog-post_01.html - 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.

Sai - Blogger Help said...

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

कांचन कराई said...

Hi,

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. http://www.mogaraafulalaa.com/2010/04/blog-post_01.html - Here you will see Disqus comment option working beside the post title. (This is a latest post - After adding Disqus comment option).

And

2. http://www.mogaraafulalaa.com/2010/03/blog-post_29.html - Here you will see "Show comment bubble beside the post title" widget working. (This is a previous post without Disqus comment option.)

♥ Sarah & Illusia ♥ said...

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

Divya Sai said...

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
</b:if>


Instead of this one:
<data:post.numComments/></a>
</b:if>

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.

HB said...

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...
~HB

dunkdaft said...

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.

Sophie said...

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

♫ mary ♪ said...

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?

Admin - Blogger Widgets said...

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

The 515 said...

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

lyaba said...

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

OrientalSpice said...

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?
http://orientalspiceandsomechocolat.blogspot.com

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

comment on this post Share Your Views

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

Join and share your views with other bloggers at BloggerStop Community

Comment Like This! and Optimize your blog...

SPAMMER OF THE MONTH: www[.]TopRankLinks[.]com

Next Post Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy