Saturday, September 26, 2020
Home Blogging Tips & Tweaks How to Add a Comment Icon Beside Posts Title in Blogger

How to Add a Comment Icon Beside Posts Title in Blogger

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 see once they visit your blog and want to view a post.

To add this 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>
.edhelper-commenticon {

    float: right;

    width: 48px;

    height: 48px;

    background: url(https://www.educativehelper.com/wp-content/uploads/2019/10/edhelper_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='edhelper-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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

List of All JavaScript Arithmetic Operators With Examples

JavaScript offers several operators to help us work with numbers. All these operators are binary operators, which means they operate on two operands. The operands...

How to Find a Website’s RSS Feed’s URL

Having access to the RSS feed of a website gives you the opportunity to stay up-to-date on everything that website publishes. Whether that’s a...

Laravel: String data, right truncated: 1406 Data too long for column (SOLVED)

I was working on a project today when i ran into the error message "String data, right truncated: 1406 Data too long for column...

How to Enable or Disable Chrome’s Autofill on Android Devices

Storing your login details and other information in Chrome and/or your Google Account isn’t as secure as using an encrypted password manager, but it’s...

Recent Comments