Please enter at least 3 characters.

How To Customize The Comment Box in Blogger

Blogger allows you to customize default comment box design with simple css. This article will guide you through that.
How To Customize The Comment Box in Blogger
How To Customize The Comment Box in Blogger
Blogger platform is more flexible and versatile than free WordPress platform as we have almost no limitation in customizing our blog theme/template codes (as long as we follow the blogger TOS) where there is almost no way to edit the theme of our blog or use our own custom theme on WordPress. 
 
Did you ever think of customizing the blogger comment box? If yes, then lets begin because we can customize the comment box's width, height or background etc.

Steps To Customize The Comment Box in Blogger

As usual again we have to edit the template code :)

Step 1) Go to Blogger → Template → Edit HTML and click anywhere inside the template code box. After that press Ctrl+f (windows) or Cmd+f (mac). 
 
You will see, a search box inside template code box appears so search for ]]></b:skin> code line and just before that paste the CSS code given below after customizing it as you think fits best. The customization process is given below the CSS code.

 #TB-cbox iframe {
     background: #ffffff url('Your-Image-URL');
     border: 1px solid #ddd;
     -moz-border-radius: 6px;
     -webkit-border-radius: 6px;
     box-shadow: 5px 5px 5px #CCCCCC;
     padding: 5px;
     font: normal 12pt "ms sans serif", Arial;
     color: #2F97FF;
     width: 574px;
     height: 240px !important;
 }
Changing Background: If you want to use the image in the background then just replace Your-Image-URL with the URL of any image you want to use in your comment box background. We suggest you not to use the image because it will cause your comment box load slowly or use very low in size image (below 50kb). If you want to change the background color then replace #ffffff color value with your desired color value.

Changing Comment Box Width: If you want to adjust the comment box width with your post area width then change the 574px to the width of your blog post area like as 600px or 550px etc.

Changing "Comment as" Text: In every comment box, you will see "comment as" text where we choose the profile we want to comment as for example as Anonymous, as Google Profile or Name URL and so on. 
 
If you want to change the color of this text then change #2F97FF color value and if you want to change font size then change 12pt to any other size like as 13pt or 14pt. You can also use px instead pt for e.g. 12px or 15px.

Step 2) If you have customized the comment box ever before or you are using a custom template whose comment box may already have been customized, you will not find the code, so we are going to search for <div id='comment-form'> and replace it with <div class='TB-cbox'> and save.

In case you did not find this code then just leave your comments below and I will manually help you the things you need to change. Our next post is all about customizing the comments avatar like as you can see on this blog so till then stay safe and Happy Blogging :)

Update:
How To Customize Comments Avatar Image
Change "0 Comment" or "Post a Comment" Message in Blogger

Share this post

24 comments

  1. the "no comments" text is huge. how do i reduce the font size of it?
    1. Just Find Out Code This Code Line

      #comments h4, .comments .user a, .comments .continue a

      Then Change

      font-size: 12px;

      or as you like..!! Or Share Your Blog Url Here We Will Let You Know..!!
  2. 11
  3. Nice tutorial!!
  4. Me want to change the comment box into raw form..Can me?

    Example:
    Name:.......
    Email:........
    Comment:.....
  5. nice
  6. Hi there, thank you for the post. I was thinking how can I customize it into having the following:

    Name:

    Email:

    Website:

    Comment:

    I've been trying to search but found nothing so far. If you could help me please email me at salahfarid1@gmail.com
    1. Salah Farid @ No we can not do that because the comment form script is external and hosted on Google servers itself and loaded directly from there so we cant change it the way we want or as you specified.
  7. Thank You Very Much
  8. Hi, I didn't find the code line ]]>

    I am trying to change the comment box size. I created my blog recently
    1. Lova Raj :: Hi,

      are you sure you did not find this code line ]]></b:skin> ?

      You need to expand the <b:skin> in your template.

      Please send me your template code if you are not able to make it work. Contact me via the contact us form.
      Thanks!
      -Satbir-
  9. Great! Thanks for the tips!
  10. I would like to add a custom form is this possible?
  11. nice article by you and your step by step method is so gud
  12. Hi! I can't find the <* div id='comment-form'> code from the html of my page. Would you please help?

    Here's the link to my blog: http://yukigosdiary.blogspot.my/
  13. Perfecto
  14. Great
  15. Nice
  16. i cant seem to change my comment box.. help!
  17. BTW, my blog is francesremo.com
  18. I want to add comment box in blogger like WordPress how can I do?
  19. There's no comments box on my new blog, i try to fix from settings> comments location, but it's not work, how can i fix this?
    1. Make sure you have enabled comments in the post. Go to post and look for 'Options' tab. Enable comment.
  20. hi