How to Change or Customize "Post a Comment" Text

What is this & why should we customize it?

I'm referring to the "POST A COMMENT" text which allows or prompts (in case of Embedded Comment Form) our users to make a comment on our blog. So, if this tiny piece of text is attractive then it'll surely grab the attention of visitors.


How to find "POST A COMMENT" text in my template?

Actually, Blogger uses different data tags to print out messages like this one. So, it you'll go to Layout -> Edit HTML and search for "POST A COMMENT", you won't find anything. To find the Blogger data tag which represents "POST A COMMENT", check Expand Widget Templates and find the following line of code:

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

Note: If you can't find the above code then please contact me by writing a comment otherwise continue with the tutorial.


I've found the code but how to customize it?

Now we know our target so we can use only a single CSS definition to customize it and fortunately that definition is already in our code. Go to Edit HTML tab and find the following piece of code:

#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}

This definition is defining the style of "POST A COMMENT" text. You can modify it by adding and changing the existing parameters. I'll explain the above definition now!


margin:1em 0; represents the margin (or distance) from top & bottom (currently 1em) and right & left (currently 0). So, you can control the spacing of "POST A COMMENT" text by simply modifying the margin values.

font-weight: bold; is causing our font to appear bold but you can change font-weight: bold; to font-weight: normal; if you don't wish to make it bold.

line-height: 1.4em; is just defining the line height of our text but I'd suggest you to delete this property for our case.

text-transform:uppercase; is transforming the text to uppercase. You can change text-transform:uppercase; to text-transform:lowercase; if you want to make "POST A COMMENT" in lowercase or you can replace it with text-transform:none; if you don't want any modification in it and leave it as it is.

letter-spacing:.2em; defines the spacing between each alphabet. Increase or decrease the value .2em to see what happens.

color: $sidebarcolor; is defining the color of our text. I'd recommend you to change color: $sidebarcolor; to color: #ffffff;. In this way, you can easily add the hex code of any color in your definition. Currently, I've added ffffff which is the hex code of white color. How to find the hex codes of different colors? You can simply use a free software like ColorPic.

Similarly, you can add some more properties to customize your text but I'll recommend to keep the things simple and add only one property which is:

font-size:20px; Of course, this property is defining the size of font and you know how to modify it.

Finally, I've removed a property to suit my taste (line-height) and also added another (font-size) to get better control over "POST A COMMENT" text. Now, the CSS code should look like this:

#comments h4 {
margin:1em 0;
font-weight: bold;
text-transform:uppercase;
letter-spacing:.2em;
color: #ffffff;
font-size:20px;
}

Conclusion & final words!

I've tried to explain this tutorial in the simplest of manner but you can always ask questions or give suggestions for future writings. Your comments are very welcomed!