Add Comment Bubble Next To Post Title

This is another exiting comment tutorials from blog toolz. The concept is clear by the heading. Add number of comments bubble next to post title.This Bubble can be changed i will get to it further. Showing the number og comments really help you to get more comments and commenters. So have it in your blog.

Steps To Add Comment Bubble Next To Post Title

• Login to your Dashboard.
• Go to Templates.
• Edit Html >>Expand Widget Templates.
• Find for ]]></b:skin> tag.
• Paste the below code before it.

.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(Your Bubble Image Link);
background-repeat: no-repeat;
font-size : 18px;
position:absolute;
margin-top : -15px;
margin-right : 2px;
text-align : center;
}

List Of Bubble Icons

• Now, find for this code.

<h3 class='post-title entry-title'

• Add the below code before it.

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

• Now, Save your Template.

It's Done.

Categories: Blogger Tricks , CSS