By simply looking at the number of comments appearing for a post on a blog, one can simply tell how popular that post is. The more the comment count, the more interesting and eye catching the post will be to newer visitor who are simply looking for posts to read in a blog that others consider as interesting and helpful. By default, Blogger displays the comment count in a blog immediately after the post.
This means that a visitor will have to go through the post or simply scroll to the bottom of the post to know the number of visitors that have left a comment on the post.
The major aim of a good blogger is to make sure he/she meets up with the expectations of his/her blog visitors.
Adding a comment count to your blog posts is an alternative way of letting your blog visitors know which post other visitors find interesting and so are more engaged in.
In this post, I am going to show you guys how to add the comment count icon next to your posts title so that it will be one of the first things visitors will see once they visit your blog and want to view a post.
To add this to awesome feature to your Blogger blog, simply follow the steps below;
Login to your Blogger Dashboard .
Go to Template >>> Edit HTML .
Click anywhere inside the Edit HTML page and with the help of Ctrl + F , search for
]]></b:skin>
Copy the CSS codes below and paste just above/before the
]]></b:skin>
.easytins-commenticon {
float: right;
width: 48px;
height: 48px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwKrAhTUBvCLM4cmyephkCTiSTxvBbMFchyUbCkEGOO7BiXAj1V7ZLUEw2zpyvrt-1KfVJ60Bmb60SH3RhbagxmR20HCo2gPXAco04hvIW8ZvRsaeyZ4mhfFkKljVfTyuiK-fBYwK8pRc/s1600/easytins_commenticon.png) no-repeat;
font-size: 18px;
float: right;
margin-top: -15px;
margin-right: 2px;
text-align: center;
position: float;
text-align: center;
}
Next search for
<b:if cond='data:post.link'>
When you search for
<b:if cond='data:post.link'>
in your template's code, you might get more than one of it. All you need to do is locate the one that has <h2 class='post-title entry-title' itemprop='name headline'> above it.
Copy the code snippet below and paste just above/before the
<b:if cond='data:post.link'>
code i.e. in between <b:if cond='data:post.link'>
and
<h2 class='post-title entry-title' itemprop='name headline'> in your blog's template HTML codes .
<b:if cond='data:post.allowComments'>
<a class='easytins-commenticon' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>
Finally click on Save Template and you are done.
For questions relating to this post, kindly use the comment box below. For other questions not related to this topic, simply use the Contact Us link to send me a personal message which I will respond to as soon I get the message.
Post a Comment