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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGB4FujM8zQmBorc_qFuZWOcfgbjblc9pRZooDgPqKulSUpVzhiWXTqaBJ63BrbTH9m3jmdq_YIi-O1apMLMiU6bSTHr3bRtNI6PEoihAgAtfM9vgbCXCQhY069j9I-l0WxMSMxtVpx6gL/) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGB4FujM8zQmBorc_qFuZWOcfgbjblc9pRZooDgPqKulSUpVzhiWXTqaBJ63BrbTH9m3jmdq_YIi-O1apMLMiU6bSTHr3bRtNI6PEoihAgAtfM9vgbCXCQhY069j9I-l0WxMSMxtVpx6gL/) 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)
173 comments:
Post a Comment