21 April 2011

Add Bubble Comments Counter in Blogger Blog Post Title

Advertisements

More and more innovative ways are coming to make Blogger blogs attractive. Bubble Comments Counter is one of them. This bubble displays the total comments number for the any posts. Click for DEMO. Some of the new Blogger templates already have it. But if your template do not have bubble comment counter the following is the easy method to add it.


Step 1
Sign in to Blogger Dashboard. Go to Design > Edit HTML. Click on Expand Widget Templates. And look for ]]></b:skin>
Add following code just BEFORE this ]]></b:skin>

.comment-bubble {
color:gray !important;
float : right;
width : 48px;
height : 48px;
background : url(http://1.bp.blogspot.com/-FpLr0vPlo_Y/Ta_ffyiSyzI/AAAAAAAAMQ4/V5RxQA0RytU/s1600/bubble+%25281%2529.png) no-repeat;
font-size : 22px;
margin-top : -12px;
margin-right : 2px;
padding-top:5px;
text-align : center;
position:absolute;
}

To align the bubble to the right side of the post title just remove position:absolute; from above code.

Step 2
Look for the following code
<b:includable id='post' var='post'>

You will get following code. Add RED code as follows.

<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 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>
Save your template.

Related Posts

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More