Blogspot Comments Tutorial: Easily Change or Customize "Post a Comment" Text

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

Find "POST A COMMENT" Text in HTML

Actually, Blogger uses different data tags to print out messages like this one. So, if you'll go to Layout then 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>

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

Customize the Code

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

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

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

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

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

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

Color

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.

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;
}

Before You Leave

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!