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. Please have a look at some examples below,

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



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,
- Go To Blogger > Layout > Edit HTML
- Check The Box “Expand Widget Templates” at the top right corner.
- 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{7. Save your template and view your blog to see a different touch :>
background:#ffffff url(http://3.bp.blogspot.com/_7wsQzULWIwo/Sx1aCAx_44I/AAAAAAAACeo/HZz8QQT0etM/s400/plz-do-not-spam1.gif) 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(http://1.bp.blogspot.com/_7wsQzULWIwo/Sx1Zs5rasXI/AAAAAAAACeg/0fBam5AkHS0/s400/plz-do-not-spam2.gif) no-repeat bottom right; border:7px solid #7EB2AC;
}
#mbt-form a{
color:#7EB2AC;
}
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 iframeHere are the details for each section
#mbt-form iframe:hover
#mbt-form a
1. Customization For Active Mode
#mbt-form iframeThis 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 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.
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.
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)
.post
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:hoverIt 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 aThis 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.
Any question is welcomed :>

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 »









136 comments:
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.
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
wonderful Mohammad
@adnan
Thanks for you subscription.
Code Sent!
@Willi @TAMIL
It is exciting to know that you guys found it interesting.
For me also please jayaraj.chinna@gmail.com
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.
http://i49.tinypic.com/bg6w6a.png
@Chinna
Code Sent!
@Amith
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! :>
thanks a lot. very use full
wow nice will you make one for me according to my blog please???
http://airtelcoolhacks.blogspot.com
@Sachin
Learn it your self using our HTML Editor. You will surely make one!
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 ; frankiejohn4u@hotmail.com and this is my blog ; http://frankiejohn.blogspot.com/
Thanks for your loyal supports,
Frankie John
Amazing and too easy!!!
Really thanks!
@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 :>
@voc
Thanks dear.
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.
Thanks.
Paul.
@Paul Crowe
You welcome Paul :>
Attach your Subscription Email ID if you wish to receive the CSS codes for other forms.
Is this really possible? Is there a way we can translate the comment form?
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.
can you give the css code for the 2nd one(the wood).
I have suscribed
varun419@in.com
i'll try it first...thanks
can you give the css code for the 4th one.
I have suscribed. My email: huynhathawave@yahoo.com. Thanks alot.
@varun
Just sent you the CSS codes! :>
@Viprolan
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.
Hi there i have subcribed to your post,kindly email me the codes,abdulrafay_789@hotmail.com
i subscribe you..and i wanna codes of this comments form
mary_3st3_tare@yahoo.com
have a nice day!
xoxo,mary ^^
i wanna mean THESE******** comments form
god! -_-'
sorry again for english
varun419@in.com
Can you please send this again to my email.I lost the one you sent me.Thanks
Hello,Anyone There,,I need This Package varun419@in.com
have subscribed and am interested in comment forms.
elizabeth_seither@hotmail.com
thanks
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
punya saya form komentar nya kok malah kepotong yah waktu pas verivikasi kode nya...?? gmn tuh boss?? please share dong..
lam kenal adit
test
Thank you!!!
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.
cheers-jym
Stopped me from using Disqus. Good.
Yararlı bir paylaşım olmuş teşekkürler...
Excellent. I followed your instructions and it worked perfectly in the first try.
Thank you!!
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?
I had played around with the comment section but nothing this inventive.
Thanks. driving lessons manchester
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.
Thanks you
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 --> http://www.bloggerbuster.com/2007/08/translate-your-blog-using-google.html#comments and
http://i56.tinypic.com/29embnb.png
I've searched and searched on google but I can't seem to find any tutorial for it. Thanks!
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!
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 : www.qalish.com
my email: starlove_2u@yahoo.com
how about to change the position?
I subscribed... charlenelynnlong@aol.com
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.
Excellent post! But i already used intensedebate.
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 : flatzav@yahoo.co.id
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... :(
@Rocka
Please use the codings I emailed and see if it works.
Hi! Is it possible to change the colour of the comment box
@Peter
I am afraid we can not change the white color buddy. That CSS can not be accessed.
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?
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 azifairalways@gmail.com
Hi,
I had embedded your contact form(with child image) in my blog (http://discoverdreamland.blogspot.com). 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?
Hi, Mohammad.
I rather like the brick comment form. I have subscribed.
Cheers,
M16Murphy@gmail.com
@M16 Murphy
I have sent them all. Enjoy! :D
@Ashish
I did never recommend intense debate or comment luv. Please avoid them for better page load time. Please share your Email Id.
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.
Thanks
http://discoverdreamland.blogspot.com
ashishhgaurav@ymail.com
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.
Thanks
http://discoverdreamland.blogspot.com
@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.
I had subscribe ..Can you send me the html code of wood and brick comment form on my mail shahsantosh2009@gmail.com.
I think those out of those two one will be suitable in my blog http://danfenepal.blogspot.com
@Santosh
the copy has been sent to your inbox.
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.
THX for sharing
Congratulations on the tip and the blog
It is very helpful!
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.
http://www.modeplatsen.se
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
awesome.. most useful trick i have ever came across. thank u. :-)
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: www.infvalue.com , I hope you can help me solve the problem. Thanks a lot
i m your subscriber
plz send me the last design (orange) at fahadbinkhalidpk[at]gmail
finicky321@gmail.com
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
nice~
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
m waiting for your new comment form....
thanks
I subscribed your MBT. please send me...
lankablogg@gmail.com
I subscribe mbt. please send me the 2nd . lankablogg@gmail.com
Asalamualikum to all of you.
Muhammad bahi i like your blog v v much. thx for uploading good information. thanks once again.
great article
visit:
http://internetricks4u.blogspot.com/
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 http://craftysideup.blogspot.com/ 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..
Great post buddy...I have subscribed...my mail id is sashwat.padhy@gmail.com
I have subscribed, my email is: siuhanley[at]gmail[dot]com
Just subscribed & would LOVE the code for the template below the baby! That would be awesome @themomdiaries Thanks for this...
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
Sreedhar
hello! i already subscribed! my e-mail is theadoboflakes@gmail.com thanks in advance!
very thanks!!! :)
Affiliate tips
i have subscribed send me all comments cuszomised comment form
here vhemant03@gmal.com
thanks
Hi mohammed, I have subscribed to your email updates. Pls send me all customised comment form at kelechi_n55@yahoo.com.
Thanks for your work!
very good job friends, I like your style
hey Friend email me all codes of This
dklove84@gmail.com
Inshaa allah, allah will bless you!!!!
http://internetricks4u.blogspot.com/
I hope Im tooo late.. But, I need to try this. already subscribed. send me the codes please...
Please email me the codes, kamini1963[at]gmail.com
P.S.- I have subscribed to your blog :)
Sent to all! :>
More updated 1000+ customized comment forms are available now at: 1000+ Comment Form Patterns and backgrounds
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.
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
spebusiness@gmail.com
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!
dear sir what is the link url for "reply" for commentors plz email me to spebusiness@gmail.com
wooowww thank for your sharing
berita
Partner
Please sent me the code for that wooden style comment form
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.
iseemyselfinme@gmail.com
It looks like Hack with Style copied your tutorial word for word.
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;)
Lucy
I tried it my Blog Check it outMashable tricks
Awesome... wonderfull tutorial but, i found the better... maybe... no hurts feeling
thanks for this code, i have just added it to my blog here university of Nigeria Nsukka
Hey Mohammad this is my email I subscribed to:
daniel.rechey28@gmail.com
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 zeenatvar@gmail.com
i have subscribed give the code of this css ..
email rajdubeygkp@gmail.com
hi Subscribe with your blog my email is nomanmemon1986@gmail.com kindly send me more comment form codes .. \
Regards
Noman Memon
Visit http://nomanmemon.blogspot.com
http://pakistanmoneyonline.blogspot.com
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 http://parthasarathi108.blogspot.com. If you kindly help. Thanks. My email add is parthasarathi108@gmail.com
Hello brother this is my email : alamin.mahamud1@gmail.com
pls send me the code to install comment box like u r using
I have subscribed email. Can i have cool comment form?
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.
Thanks!
Monica
http://mmweissfamily.blogspot.com/
woow, I've succesfully installed it into my blog,thanks
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 id:Chiran_ad@yahoo.com
Wooden Style !
plzz SEnt The COde
Nice Designs buddy........:)
Regards
myblogginglab.blogspot.com
NOT WORKING BRO
IAM NOT ABLE TO PASTE THE CODE BELOW THIS
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.
PLEASE HELP ME
Try this comment design :
BLOGGER COMMENT SYSTEM LIKE SPICE UP YOUR BLOG
http://www.yourpcgenie.net/2012/09/blogger-comment-system-like-spice-up.html
you are awesome man .... http://www.theengineeringprojects.com hats off
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: http://www.hotroseo.com
Thank you very much.
Já me inscrevi..Obrigada ótima explicação.
prova
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 http://www.wolfandlace.com and my email is laurenschoon@yahoo.com
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: easymoney4naija@gmail.com
send me the code for the comment form. thanks.
@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
example
"confuse? feel free (and the rest)
Free Download SpeedUpMyPC 2013 5.3.4.4 Final Full Key/ Serial Number Thanks dude, nice Post .good admin Thnaxxx
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 ?
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 : http://www.needonetouch.org. Hope you will again visit my site.
akhil
i have already subscribed. gimme the last one. the one with orange border.Thanks
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
Click Here To add Comment
Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. To add HTML CODE in comments then please use our HTML Encoder
2. You can always Test the tutorial on our HTML Editor
3. No cheesy/spam Comments tolerated Spam comments will be deleted immediately upon our review.
Regards,
Mohammad