Tuesday, April 6, 2010
Blogger Hacks
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>
.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>
<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>
<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 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>
<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
Subscribe to:
Post Comments (Atom)
41 comments:
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.....
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
How can I add hover text that says, "Click to Comment?"
Hi, thanks for sharing it a great article.
www.coredbsystems.com
Hi nice article. But I see only the number of comments and not the background image. What can I do?
I don't know how to add comment bubble but I want to create something new in this sphere!
thanks for your help..
thanks for this great article.
thanks for your help..
How do i get my blog post title and url of the post to show in the search results?
Thank you for this! Such a helpful article!
I'm also having trouble finding the h3 class code..
Can you help me
Well, I’m new in this blogging stuff. Barelay made my first week. I’m using blogger. Thanks
Its cool....i would like to know how to create the message come on guys please visit my blog http://freeidoserdoses.blogspot.com
THIS IS VERY USEFUL ARTICLE FOR ALL.,THANKS
Hi, everybody please visit my website http://www.medicalweightlosstraining.com
Thanks a lot for writing about useful subject. It is required to understand that iphone app development could help in your business by installing customized software solutions.
It's nice info. Let me mention about homeowners insurance cost provided by house protection companies. Save on free online rates on homeowners insurance.
Thank you for writing this great posts. You have great chance to check affiliate programs. The most common casino programs such as affiliates united and great poker rooms such as redbet.
How do i hide my myspace comments without hiding the add comment links and without centering my whole profile?
Hi,,Thanks for shearing nice Blog.
How do I transfer my Blogger feed readers to my Wordpress blog?
Thanks so much for sharing this great feature - works a treat! Appreciate the easy-to-follow instructions, too. Happy New Year :)
I wanted to thank you for this great read!! I definitely enjoying every little bit of it I have you bookmarked to check out new stuff you post
You have shared a nice blog. I really want ot say you thanks for sharing this nice article with us. This one is enlightened blog post. Thanks a lot for sharing your valuable views through this blog, thanks for the good insight.
Post a Comment