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.
3. Replace that code with the code below.
.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
and you’ll eventually see the whole bunch of the codes below.
<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.
<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.
<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’>
<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
Very informative article for blogger nice trick how to add comment bubble beside the post. Great shearing.
@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.
Hi, thanks for sharing it a great article…..
http://www.itemplatez.com
Thank you so much. Just what I needed!
Ann, Welcome. I'm glad I could help you.
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
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
mpc,
1. Go to Layout > Edit HTML and then find for this code in CSS.
.post_title a, .post_title a:hover {
color:#FFFFFF;
text-decoration:none;
}
2. Change the #FFFFFF with any other suitable colors. You can refer to the link below for the hex values.
http://www.w3schools.com/css/css_colors.asp
3.Click "save"
thanks for your help
hi there..help me with this:
i cant find code in step 4..
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…
im using one of ur template..girl in circle
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
thanks a lot raj.. \(^0^)/
Lyya, welcome…..
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
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… =)
my comment is not short fer