Add Comment Widget to your Blog

You noticed the number of comments displayed in comments section inside each posts. It is placed under the post. It is not noticeable to visitors. Do you want to add it to header to inspire your visitors to comment. The visitors only see the comment count when they reach at the end of the post. if the visitor not scroll to footer part , the comment count will not see. Do you think about displaying comment count on the top of post will be better? Then here we are showing a technique to add comment count with beautiful backgrounds to the header part of the post, not only inside the post but also it will display to homepage.

After adding his trick the comment count will be displayed with post titles , if more comments on the post, it will encourage the users to comment and also helps to jump to comment section.

Here are some tricks related to comments
Recent Comments Widget
Change Comment Style in Blogger 
Highlight Author Comments in Blogger
Verified Facebook tick mark for author comments
Add Yahoo smileys to Blogger Threaded Comments
How to change Blogger POST A COMMENT message to Image

How to add Comment count to Post Header

• Sign In to Blogger Dashboard
• Go to Template -> Edit HTML
• Find (Ctrl+F) ]]></b:skin> and copy the below code above it

.comment-count {
float : right;
width : 48px;
height : 48px;
background : url(  IMAGE URL  );
background-repeat: no-repeat;
font-size : 18px;
position:absolute;
margin-top : -15px;
margin-right : 2px;
text-align : center;
} 

 Choose the comment count background

• Copy the URL of image you want by right clicking and select Copy image Location or Copy Image URL.
• Replace the RED marked portion above with the image URL

 Add Comment count code

•  Find the following code 

 <h2 class='post-title entry-title' itemprop='name'>

 or

 class='post-title entry-title'

•  Add the following code below it

<b:if cond='data:post.allowComments'>
<a class='comment-count' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>

•  Save Template

Congratulations you have done. Check your blog and get more comments. If you liked this article please like and share this blog.