December 9, 2009

Customize Blogger Comment Form – Make It Possible!

Customize-Blogger-comment-form Today's tutorial is the most demanded and most wished but rarely answered in blogosphere. For some designers customizing the Blogger Comment Form is somehow not possible whilst for others it is tricky but from today onwards InshAllah every blogger will actually be able to customize the Blogger Comment Form in the best way possible! After some trial and errors we actually succeeded in altering Blogger’s official CSS coding. We are happy to have brought you with a tutorial that will indeed enable you to have a customized Comment Form far better than that of Wordpress, Typad etc.

Blogger Comment Box Series
1. Customize Blogger Comment Form

Please have a look at some examples below,

Brick Style Comment Form

Wooden Style Comment Form

Now Hover Your Mouse Cursor at these comment forms for 3-4 seconds to see something different!

Baby Comment Form with message for spammers
Simple Comment Form with message for spammers

Orange Comment Form with message for spammers
We hope you liked this new discovery! Lets now learn how to customize the blogger comment form/box to suit your preferences.

Adding A Customized Comment Form To Your Blog

Note:- The Following CSS code is for the Comment Form With a Baby in it. Other CSS codes will be provided to subscribers only. If you haven’t subscribed yet kindly subscribe now and inform us by leaving a comment with your Email ID.
Follow these steps,
  1. Go To Blogger > Layout > Edit HTML
  2. Check The Box “Expand Widget Templates” at the top right corner.
  3. Search for the code below,                                  Tip:- Press Ctrl + f
<div class='comment-form'>
     4.   Replace this code with the code below,
<div id='mbt-form'>
     5.   Now Search for ]]></b:skin>
     6.   Just above ]]></b:skin> paste the CSS code below,
#mbt-form iframe{
background:#ffffff url( no-repeat bottom right;
border:7px solid #C7C7C7;
padding:5px; font:normal 12pt "ms sans serif", Arial; color:#7EB2AC; width:450px; }
#mbt-form iframe:hover{
background:#ffffff url( no-repeat bottom right; border:7px solid #7EB2AC;
#mbt-form a{
     7.     Save your template and view your blog to see a different touch :>

Customize The Blogger Comment Form To Suit Your Blog Layout

Now Lets discuss the important areas in the CSS code above to help you customize your Blogger comment form according to your preferences.
There are three important areas, which are,
#mbt-form iframe
#mbt-form iframe:hover
#mbt-form a
Here are the details for each section
1.    Customization For Active Mode
#mbt-form iframe
This part is responsible for the active appearance of comment box when mouse cursor is not hovered on it. It includes the following style properties,
background: This property is responsible for the background color, background image and background image’s position. Where,
  • #ffffff : This is the background color. You can change it using our Color Chart
  • url : This is the URL for the background image. I used the baby in this case. You can change this image with anything you like.
  • bottom right: This positions the background image. I positioned the baby on bottom right corner. You can position the image at bottom right or bottom left or top right or top left
border: This CSS property defines the border size/width, style and color of the comment box. I have set these values for the Comment form in active mode(not on mouse over),
  • border size to 7px,
  • border style to solid. You can choose solid, dotted, dashed etc. See this page on border styles
  • border color to  #C7C7C7. Use our CSS Color Chart for using a different color.
padding: This CSS property is responsible for the distance/gap between the Comment Form border and its text area. You can increase this value if you wish to insert an image at top right or top left corner of the form.
font:  This CSS property defines the boldness, font family and the size of the text. I have set the following for the text “Comment as:”
  • boldness to normal,
  • size to 12pt 
  • font family to  "ms sans serif". If in case the browser doesn’t has the "ms sans serif" font then I have set Arial as a backup.
color: This property defines the color of the text “Comment as:” . Use our Color Chart for changing the text color.
width: This property sets the width of your Comment Form. You can see the comment from of my blog is wider than normal because I have adjusted its width. Set the width of your comment form a bit smaller than that of your post width. You can find your post width by finding the following code in your template (Edit HTML)

2.  Customization For Mouse Hover Mode Now lets discuss the CSS properties for the form’s appearance when a mouse cursor is hovered on it.
#mbt-form iframe:hover
It has almost the same explanations for background and border as we discussed earlier. Setting these two CSS properties will effect the second image only that appears on mouse hover.
3. Customization For The Link Colors
#mbt-form a
This part defines the color of these two links -> “Sign out” and “Subscribe by email” . These links appear at bottom right corner of every Blogger Comment Form.
color: This sets the link color. Set a link color as contrast to the background color.

That’s All!
I hope this tutorial will be of great help to bloggers and designers. We request everyone to kindly link back if you wish to share this unique tutorial with your readers and friends. We thank you for your patience.
Any question is welcomed :>

Need Quick Help within 24 Hours? ASK NOW

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

151 comments : Post Yours! Read Comment Policy ▼
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. This is something remarkable you have done mohammad! Thank you so much. I really never expected to see my own form with my own customized colours and look. I thank you so much for making it so easy.

  2. I really don't know how to thank you except that you made my day!

    Just subscribed using the ID
    svwillie @ G Mail

    Please sent me the code for that wooden style comment form

  3. @adnan
    Thanks for you subscription.
    Code Sent!

    @Willi @TAMIL
    It is exciting to know that you guys found it interesting.

  4. For me also please

  5. This is another cool post Mohammad.thanks
    but i want to add image before comment form,just like u.plz help me with that.I am providing a image that will help u what i am exactly want.

  6. @Chinna

    Code Sent!


    Do This,

    1. Go To Blogger > Layout > Edit HTML
    2. Check The "Expand Widget Templates" Box
    3. Search For This, <data:postCommentMsg/>
    4. Replace it with this,

    <img border='0' src='IMAGE-URL-GOES-HERE'/>Confused? Feel free to ask

    Remember to replace IMAGE-URL-GOES-HERE with your image link.
    5. Save your template
    6. Done! :>

  7. wow nice will you make one for me according to my blog please???

  8. @Sachin

    Learn it your self using our HTML Editor. You will surely make one!

  9. I not really understand about the article, i try to do myself but still can't. Can you help me?.

    Please sent me the code for that baby style comment form. This is my email address ; and this is my blog ;

    Thanks for your loyal supports,

    Frankie John

  10. Amazing and too easy!!!
    Really thanks!

  11. @Frankie John

    You will need to first subscribe by submitting your email address in the subscription form on the right sidebar. I will email you the code instantly along with instructions. TAke care :>


    Thanks dear.

  12. You got some great tips here but this is one of my favorites !

    I had played around with the comment section but nothing this inventive.



  13. @Paul Crowe

    You welcome Paul :>
    Attach your Subscription Email ID if you wish to receive the CSS codes for other forms.

  14. Is this really possible? Is there a way we can translate the comment form?

  15. Of course it is possible. The examples are in front of your eyes.
    Well unfortunately the comments ID names and other text data can not be translated.

  16. can you give the css code for the 2nd one(the wood).
    I have suscribed

  17. can you give the css code for the 4th one.
    I have suscribed. My email: Thanks alot.

  18. @varun

    Just sent you the CSS codes! :>


    Friend kindly activate your feeds first to receive the requested code. I will email you the codes as soon as I find that the feeds have been activated.

  19. Hi there i have subcribed to your post,kindly email me the codes,

  20. i subscribe you..and i wanna codes of this comments form

    have a nice day!
    xoxo,mary ^^

  21. i wanna mean THESE******** comments form
    god! -_-'

    sorry again for english


    Can you please send this again to my email.I lost the one you sent me.Thanks

  23. This comment has been removed by the author.

  24. Hello,Anyone There,,I need This Package

  25. have subscribed and am interested in comment forms.


  26. Is there any way to change the height? I've tried editing the height in the iframe itself and all possible classes/id's

    it's driving me insane because I align my blog to a grid! :/ :p Thanks! :D ;p

  27. punya saya form komentar nya kok malah kepotong yah waktu pas verivikasi kode nya...?? gmn tuh boss?? please share dong..

    lam kenal adit

  28. Hi Mohammad-

    Excellent tutorial.

    How would you change the color of the actual WHITE Comment form? I've actially tried adding CSS Style commands to the command-form area, and even created a CSS element to refer to 'comment-form', but I've had no luck.

    I've always used a dark Blog template, so it would be great to lessen the bright contrast of White on the comment form. Or perhaps even giving it a light/pastel color to match any of the techniques you've demonstrated here. Any ideas?

    Again, thanx for the tutorials here- I especially like the 'hover over' toggling.


  29. Stopped me from using Disqus. Good.

  30. Yararlı bir paylaşım olmuş teşekkürler...


  31. Excellent. I followed your instructions and it worked perfectly in the first try.

    Thank you!!

  32. This is awesome thank you, I haven't tried it yet but I'm excited.

    In other questions...How do you make it so that when you respond your comment looks different than ours?

  33. I had played around with the comment section but nothing this inventive.

    Thanks. driving lessons manchester

  34. Thanks, Mohammad. Since I used your html editor about morethan 6 months ago, I started loving css and html and always practise. Now I really love html and css of course you made me like it. Thanks.

  35. Hello, Mohammad. I have a question to ask and I really hope you can help.
    Is there a way I can put the datestamp on the same line as the comment author like this one --> and

    I've searched and searched on google but I can't seem to find any tutorial for it. Thanks!

  36. Im indeed a subscriber too! meliane.bureau (at)gmail
    I wish to customize mine with my own bg-img and such. I guess the brick or wood one would suit me best.
    Thx this is amazing!! Finally!

  37. Hai muhammad,

    i'm very like this modification. can you help me to do this. i already follow you and also subscribe this blog.

    my id : sumpit kamal
    my blog :
    my email:

  38. how about to change the position?

  39. I subscribed...

  40. Hello Mohammad,
    sorry i am asking you question in your most of the post but i need to thing in my comment section
    1) in my comment section when someone comments is doesn't show the avtar(profile picture)of that person.
    2)and link in your comment section when i reply to my reader it should be displayed differently like in your case it shown in green color which is quite awesome.
    so please help me brother.

  41. Excellent post! But i already used intensedebate.

  42. Hello Mohammad,

    First of all i want to thank you for your nice article, but i have a problem when modifying my comment form. I have tried to change the html codes as you show above, but no changes at all are shown in my comment form.
    Actually, i also have tried several tutorials, but still it does not work at all. I thought, maybe there is some codes that is locked or something. For you know, i'm using 'My World' template. I really hope that you can help me to solve this problem.

    Thank you again for your kindness and attention.
    I have subsribed and this is my email address :

  43. I have emailed all the copies and please try it with the new codes and if you needed any help kindly let me know.

    I really feel embarrassed to have replied so lately... :(

    Please use the codings I emailed and see if it works.

  44. Hi! Is it possible to change the colour of the comment box

  45. @Peter

    I am afraid we can not change the white color buddy. That CSS can not be accessed.

  46. hello again,
    im using the "MBT Church theme" now and i've done all the steps exactly as you said, but still it can not work well. can you help me to put this comment form on MBT Church theme?

  47. hello mr.mohamed salam alaikkum

    i have started one blog and if anyone want to comment on my blog through tamil, it doesnot work. and they comment through english and other languague also. so how to get the comment everything tamil. should i keep any tamil converter in comment area. can you help me - drop mail to my id

  48. Hi,
    I had embedded your contact form(with child image) in my blog ( Its really cool. Thanks for it. As you had told me to embed intense debate comment box and also activate comment luv. So how can i do that? I had subscribed to your site. Send me the code for that. Do you wanna be first commenter to comment on my blog?

  49. Hi, Mohammad.

    I rather like the brick comment form. I have subscribed.


  50. @M16 Murphy

    I have sent them all. Enjoy! :D


    I did never recommend intense debate or comment luv. Please avoid them for better page load time. Please share your Email Id.

  51. Can you tell me what's the reason that intense debate will take longer time to load than normal comment form? Can you suggest me some comment mechanism in which comments can be COUNTED and admin comment appears DIFFERENT from other ones. It should be bit stylish. I hope you can find one and let me inform. I didn't got your message until i visited this page again. Please mail me or reply on my blog so that i can be updated.

  52. I can see that you also have comment counter and admin comment appear different. But its bit simple. I want some stylish one. Please help me out.

  53. @Ashish

    Apologies for late reply:

    Intense debate works on a javascript that is stored at their servers. When your blog loads, the browser contacts the intense Debate servers for retrieving data. This delay in time sometimes makes the page to load in a much longer time. Resulting in loss of precious pageviews. It also discourages commenting on your site. Its better to use the default blogger comment form as it is stored in Blogger servers where your all other data is stored.

    These customizations are what I designed at the moment. I will publish better styles in future. Hope this helps.

  54. I had subscribe ..Can you send me the html code of wood and brick comment form on my mail

    I think those out of those two one will be suitable in my blog

  55. @Santosh

    the copy has been sent to your inbox.

  56. I loved this! I made a publication in Portuguese in my blog so that readers Brazilians who do not speak English, can also follow the tutorial. Everything is properly credited to you and the MBT.
    Thank you for sharing.

  57. THX for sharing

  58. Congratulations on the tip and the blog

  59. It is very helpful!

  60. Valuable information. Lucky me I found your web site by accident, and I'm shocked why this accident didn't happened earlier! I bookmarked it.

  61. Good to become browsing your weblog once more, it has been months for me. Well this article that i've been waited for so lengthy. I need this post to total my assignment inside the university, and it has exact same subject together with your post. Thanks, excellent share.

    infertility center

  62. awesome.. most useful trick i have ever came across. thank u. :-)

  63. It does help me a lot. But I just met a new question: when I click reply on my blog and it will not show me a windows to reply. I don't know how to solve the problem. And I use the custom template. I don't if there is something wrong with it. My blog is about student club: , I hope you can help me solve the problem. Thanks a lot

  64. i m your subscriber
    plz send me the last design (orange) at fahadbinkhalidpk[at]gmail

  65. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much. Thanks u very much

  66. I wish to show my appreciation for your kind-heartedness for men and women that have the need for guidance on that subject. Your special dedication to passing the solution across became incredibly beneficial and have without exception helped girls just like me to realize their dreams. This warm and helpful guidelines implies this much a person like me and further more to my office workers. Warm regards; from all of us.
    Application essay

  67. m waiting for your new comment form....

  68. I subscribe mbt. please send me the 2nd .

  69. Asalamualikum to all of you.
    Muhammad bahi i like your blog v v much. thx for uploading good information. thanks once again.

  70. great article


  71. Hi mohammed..
    I am newbie to the blog world..and i think I messed up on the FB like box-can you check my blog and you see on the post section- there are 2 FB like box(one is wrong and one is right) I just need the second one. how do i remove teh second one? please let me know..

  72. Great post buddy...I have mail id is

  73. I have subscribed, my email is: siuhanley[at]gmail[dot]com

  74. Just subscribed & would LOVE the code for the template below the baby! That would be awesome @themomdiaries Thanks for this...

  75. Hi Mohammad Nice tutorial I have placed the comment form in my blog and it is looking cool.I want place other image at the bottom right in the comment form where you placed the baby with do not spam.Can you help me in this giving the code..

    Thanks & Regards

  76. hello! i already subscribed! my e-mail is thanks in advance!

  77. i have subscribed send me all comments cuszomised comment form



  78. Hi mohammed, I have subscribed to your email updates. Pls send me all customised comment form at

    Thanks for your work!

  79. very good job friends, I like your style

  80. hey Friend email me all codes of This

  81. Inshaa allah, allah will bless you!!!!

  82. I hope Im tooo late.. But, I need to try this. already subscribed. send me the codes please...

  83. Please email me the codes, kamini1963[at]

    P.S.- I have subscribed to your blog :)

  84. Sent to all! :>

    More updated 1000+ customized comment forms are available now at: 1000+ Comment Form Patterns and backgrounds

  85. This comment has been removed by the author.

  86. Excellent information
    I applied to my blog. There is any option to add a comment form in blooger like Name, Email Id, Web url. So it will look very nice and reduce Anonymous Commentators.

  87. Hi mohamad i want to put "wooden style comment box shown in second image in this post" i cant found image link bro. Can u please send it to
    please send soon
    the image i need is comment box background image link for css of #mbt-form iframe
    background: url(needed image link for wooden style which is in brown color pattern of plywood plank)
    Response me soon as i need urgent & within today plz sir i am also a subscriber n thanks for jumbo pack!

  88. dear sir what is the link url for "reply" for commentors plz email me to

  89. Please sent me the code for that wooden style comment form

  90. Thank You. So greatly done and awesome. Coolest Innovation. Just found and subscribed.
    Request for for the simple ' Wooden ' Model( the starting one of this post)
    Do this work for 'Pop-Up' comment also?
    Thank You again.

  91. This comment has been removed by the author.

  92. It looks like Hack with Style copied your tutorial word for word.

  93. Hi Mohammad :)

    Hello Mohammad,

    I am Brazilian and I am very happy to have discovered your blog. Sorry but I do not speak English very well.
    Already signed up to receive your updates.
    Could you send me the tutorial to customize the other comments, please?

    my email is "lucysemfronteiras @ gmail. com"

    Congratulations on your work in Blogger!
    Thank you in advance.
    A hug from Brazil;)


  94. Awesome... wonderfull tutorial but, i found the better... maybe... no hurts feeling

  95. thanks for this code, i have just added it to my blog here university of Nigeria Nsukka

  96. Hey Mohammad this is my email I subscribed to:

  97. This comment has been removed by the author.

  98. mutufa bhai ,i have subscried to you.kindly send me the css code of that first form which has a ply wood like color..please my email id is

  99. i have subscribed give the code of this css ..


  100. hi Subscribe with your blog my email is kindly send me more comment form codes .. \

    Noman Memon

  101. Sir does not work in my blog. In fact the original comment box of blogger also does not appear in my blog. I have tried almost all templates of blogger but the comment tag does not appear. My blog url is If you kindly help. Thanks. My email add is

  102. Hello brother this is my email :
    pls send me the code to install comment box like u r using

  103. I have subscribed email. Can i have cool comment form?

  104. THanks so much for this tutorial. I've succesfully installed it into my blog, however, I'm trying to change the image. I'm wondering what URL you used for image. For example, the image I want to use is in photobucket. I've tried all the links (direct link, Email&Im link, HTML code, and Image Code and neither worked. Does the image need to be on a host site? I noticed yours was from Picasa. Any help would be appreciated.



  105. woow, I've succesfully installed it into my blog,thanks

  106. hey bro i have subscribed to your blog. can i get a code for styling my comment section.It would be very great to get your response as soon as possible. My

  107. Wooden Style !
    plzz SEnt The COde

  108. Nice Designs buddy........:)


    ITS SAYING THAT Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.


  110. Try this comment design :


  111. you are awesome man .... hats off

  112. Thanks for the post, but I think you had a bit miss-type:
    (div id='comment-form') instead of (div class='comment-form').

    Because I tried to replace (div class='comment-form') but it didn't work. After that, I replaced div (id='comment-form') with (div id='mbt-form') and it works well now. This is my website:

    Thank you very much.

  113. Já me inscrevi..Obrigada ótima explicação.

  114. I have installed the comment box and it looks great, but as soon as someone leaves a comment, it reverts back to the original form. Please help! My site is and my email is

  115. i have tried everything, but the comment form is not changing, then the expand comment is also not working. pls help.
    this is my mail:
    send me the code for the comment form. thanks.

  116. @Mathew Olusayo

    the comment is working fine now. but i still need the code for the one with bird.
    PSS: how do i customise comment box to have message above it before the real comment box like yours
    "confuse? feel free (and the rest)

  117. salam hey mtb comment box is show below in post title
    it means that post title+comment box+post description what i do i want it show to like blogger comment type below blog post how it happen ?

  118. This comment has been removed by the author.

  119. hi,
    I believe that some one already published the customization of the comment box like this. I am not sure about that. My site is : Hope you will again visit my site.

  120. i have already subscribed. gimme the last one. the one with orange border.Thanks

  121. my bad mood is back in this article, coz your template "Salahuddin Ayubi" is now I use in my Blog not support to box comment..
    would you help Us..Thanks before

  122. Aking Web Tech a leading IT company & Provides web services :- website Development in just 1,999 Rs/-, software development like {Billing software, School Management Software, Inventory Software, ERP, CRM}, Domain & Hosting , SEO
    website development in indore

  123. When I am tring to subscribe via, it shows a error message.

  124. I have subscribed...

  125. This is not working in my site... please help me...

  126. I want it too.. Please contact me

  127. thanks fore information Mohammad

  128. It’s truly a nice and helpful piece of information. I am glad that you simply shared this useful info with us. Please stay us informed like this. Thanks for sharing.
    Discount Box Printing

  129. Great post.i am really happy reading this. Keep sharing.
    Cheap Box Printing

  130. Thanks for sharing this ! I had been searching for this since an hour :)

  131. Thank you for the post. I'm 18 years old, & I'm trying to start my own blog. I really appreciate this post.


  • choosing webhost for a blog

    Blogger Shortcodes

    Blogger Shortcode Plugin lets you redesign your blog with a simple one line code! It was once a dream!

  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • SEO Settings for blogger


    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit Our Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!


    Learn what it takes to become a successful entrepreneur and build a living online!