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!
