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!

20 comments:

  1. Hello,

    I cannot seem to add the 'post a comment' button to my blogger blog as it is customized. Can you help? I could send my template so you can take a look. Thanks!

    ReplyDelete
  2. Hi April @ Random, yeah that will a convenient method for me to help you!

    Send me the XML file of your template at the following address:

    levisinside0@gmail.com

    ReplyDelete
  3. please
    teach me how to customize my text
    add me in y.m please
    ethanized_thanthan@yahoo.com

    ReplyDelete
  4. @ Anonymous, I'll add you to my Yahoo Contacts but I'm not very active there so I'd suggest you to gimme your blog address so that I can have a look in it.

    ReplyDelete
  5. @ Hansyirah Takezur, please gimme your blog address!

    ReplyDelete
  6. so sad....
    i cant change post a comment in my own title... can u plx help me

    ReplyDelete
  7. Hi...
    yes We have change my lifestyle. Where We can change.

    ReplyDelete
  8. Really good site.very well information.

    ReplyDelete
  9. Is there are way to make a comment box that all readers (who are not affiliated with blogspot or google) can post comments.
    Can I turn off the requirement to be logged in as a google account and allow all readers to comment.
    I have been searching for days!!!

    ReplyDelete
  10. Hi, I can't seem to add the comment in my template is it is customized from blogskins.com
    Can you help me?
    Contact me: yikotay@hotmail.com

    ReplyDelete
  11. @ Yiko Tay, sorry:( Your blog is heavily customized. I can't help you. Please switch to some default Blogger template.

    ReplyDelete
    Replies
    1. I can't seem to add a comment by the regular method, sorry to 'reply' instead.

      I'm using bloggers simple template and the code you suggest to replace doesn't exist in my template, I've tried searching for it, and portions of it and have had no luck. Have they possibly updated the code controling comments since this post was written?

      Delete
    2. Hi Anna, you are right. Blogger has changed the codes and I've not updated this tutorial. You can send me your template file to get it fixed.

      levisinside0@gmail.com

      Delete
    3. Hi Bilal,

      I'm facing the same problem using the simple template and the code does not exist... Is there anything I can do?

      Delete
    4. Hi nyx, I'm no longer accepting any new requests. However, you can get premium support starting from $10.

      Delete
  12. I've been looking all over the web for hours and days trying to figure this out. This sounds like exactly what I need. I'm going to try this right now and see if it works for my blog. Your explanation was sooooo clear. Thanks.
    I'll let you know how it turns out.

    ReplyDelete
  13. Thank you for such great instructions! I figured out that we can also add a font-family line to your CSS code to change the font style too!

    ReplyDelete

Note: All comments will be moderated.