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