How to Customize Comment Label in Blogger

Sometimes you wanna customize your blog to be par with your expectations and requirements to improve productivity. Or just to enhance the design of your blog. Did you ever find that Blogger comment label is buggy or irritating? Oh... I must have told you before. Comment label is the text displays number of comments published in related to a particular post. Usually it appears on comment section just above comments made on a post. It's just show off the comment count. When it comes to designing or customizing your blog, you may find that there's no setting to customize comment label as you need. However you can customize this label at your template. But do you know how to customize it?

Recently I've got a query from Eugeniu Rubliovschi and he asked "Why the font and size of the number of comments is the same as for the title of the blog post?". He meant that its font size is kinda biggy and he wanna get rid of it. That query made me write this post and I'm very thankful to him. By default, Blogger comment label font is bold and bigger than normal text. So if you find it's buggy, you wanna customize it too. As I mentioned earlier, you can customize comment label by just going through your template. You may not like to touch your template, but as you read on, you will see that it's really simple and you don't wanna be a code-genic to understand it all. However I'm here responsible and doing my best to make it more descriptive and simple for you. Let's customize your comment label too.

Steps:

1. Go to Blogger Dashboard.

2. Click on your Blog Title.

3. Jump to Template tab.

Note: Before editing your template, you may want to save a copy of it. Read How to Back Up Your Template.

4. Now click on Edit HTML button.

5. Search for below code snippet in your template. This code snippet is responsible for displaying comment label.

Note: You will encounter two code snippets in your template and make sure to apply your changes for both code snippets.

<h4><data:post.commentLabelFull/>:</h4>

6. Now customize your comment label as per your requirements.

Change Comment Label Text

In order to change comment label text, replace the code snippet you found in previous step with the one below, and make necessary changes to reflect in comment label.

<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

<data:commentLabel/> layout tag displays comment text when you have only 1 comment for particular post. It's the singular form. If you have 0 or more than 1 comment for a post, it will make use of <data:commentLabelPlural/> layout tag. <data:commentLabelPlural/> tag displays comments text which is plural form. So replace those tags accordingly with a custom text you wanna show off as the label.


Change Comment Label Font

If you need to change the font and styles of your comment label, locate H4 tags enclosing the code snippet we found in previous step.

<h4><data:post.commentLabelFull/>:</h4>

Then replace <h4> tag with,

<span style="font-size: 12px; color: black">

and </h4> tag with,

</span>

Color Indication Information:

   - Font Size

Specify your preferred font size for comment label here.

   - Font Color

If you wanna change font color of comment label, specify color name or hex value of color here.


7. Now click Save template button to save changes.


Enjoy :-)