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

<div class='comments' id='comments'>
<a name='comments'/>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

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

Change Comment Label Text

First off, you should identify which layout tags responsible for rendering comment label text in the code snippet. You can see highlighted layout tags which render comment label text.

<div class='comments' id='comments'>
<a name='comments'/>
<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

By default, Blogger shows off comment label with h4 heading as highlighted below.

<div class='comments' id='comments'>
<a name='comments'/>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

If you find it irritating and wanna change font size and color easily. You just need to,

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. Once you done with customization, click Save template button to save changes.

Enjoy :-)