331A96E0-3037-43FC-8D93-543B900B11C9

😍 Loving this theme? Download

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

Explore more articles by Satbir

37 comments

Please leave comments related to the content. All comments are highly moderated and visible upon approval.

Comment Shortcodes

  • To insert an image, add [img]image_link[/img]
  • To insert a block of code, add [pre]parsed_code[/pre]
  • To insert a link, add [link=your_link]link_text[/link]
  • To insert a quote, add [quote]quote_text[/quote]
  • To insert a code, add [code]parsed_code[/code]
  1. good
  2. OK. So I finally fixed it. Just go to your blog, scroll to settings, go to comments and make your choice (embedded or full is preferred, allow comments). Then go back to layout, the blog post and tap on the edit button and allow comment count.
    That's all.
  3. Hi twistblogg, nice article. I'm having issues setting my comments section manually and I am not good with coding and I don't want to disorganize my blog via html.... Is it possible I give you access to my blog so you can help me with it? Or is there a plug in for blogger?
    I know this is a big favor I'm asking from you. I'll be grateful.

    @ Civian dot blogspot dot com
  4. Thank you for great information

    صيانة ميكروويف دايو

    صيانة ميكروويف جولدي

    صيانة ميكروويف جولد ستار

    صيانة شاشات كاترون
    صيانة شاشات بولارويد
    صيانة شاشات tcl
  5. ok
  6. How do I place the blogger comment box above all the comments similar to this one? Thank you!
  7. Ok
  8. Nice 👍
  9. How do I make my blogger comment section similar to yours?
    1. Hit me a message :) I can help you out.
  10. hi
  11. Hello
  12. coment test
  13. hi
  14. 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.
  15. I want to add comment box in blogger like WordPress how can I do?
  16. BTW, my blog is francesremo.com
  17. i cant seem to change my comment box.. help!
  18. Nice
  19. Great
  20. Perfecto
  21. 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/
  22. nice article by you and your step by step method is so gud
  23. I would like to add a custom form is this possible?
  24. Great! Thanks for the tips!
  25. 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-
  26. Thank You Very Much
  27. 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.
  28. nice
  29. Me want to change the comment box into raw form..Can me?

    Example:
    Name:.......
    Email:........
    Comment:.....
  30. Nice tutorial!!
  31. 11
  32. 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..!!
Post a Comment