How To Change Background Of your Blogger Comment Box:
- Go to Blogger.com >> Template
- Backup your Template if in case any thing goes wrong.
- Now select Edit HTML >> Proceed and press "Expand Widget Templates" button.
- And then search for ]]></b:skin> and just above it paste the following Style Sheet (CSS) coding.
#mbl-comment iframe{
background:#ffffff url(IMAGE-Here) repeat;
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:560px; height:213px !important;
}
#mbl-comment a{
color:#fff;
}
1. Replace IMAGE-Here with the image background URL that you want to see in your Blogger comment box. For your convenience, we have listed few backgrounds links below so you may enjoy the irresistible comment box.
2. If you want to adjust the width of your comment box, then you can customize it by replacing width:560px.
3. If you desire to change the color of "Comment as", then replace the HEXADECIMAL color "#2F97FF" with your personal favorite
- Now in the blogger template search for
<div class='comment-form'>
- then just replace it with
<div id='mbl-comment'>
- Now save the template and you are ready to enjoy your new Blogger Comment Box!
Comment Box Backgrounds and Vectors:
HP Laptop Luster Theme:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqAqjbb0mlVYgkFpYLVePJZYXxxFa1ukg4wfrxgYOGHKCLbRBPp_sCDUyBlyXx-zkTcBBjeR5ldvisB1dHnkCuxl17X_3IVUR78FPR_eDJAfiRXEyyAkR3L4fqaoBx93DN8E_1xaAUFqQ/s1600/HP-Laptop-Luster.png
Moon Ramadan Theme:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqk4uAtQCwb0PwEbt81kd621WbCAhYNzh8qlj9id2ydXg7kt3CZaeMCWMflKZSUO0NV9Hzh5ptf9A0QWXQv8v-yV_R3DbaOt8DiARhSs9PyG4p5mZ5TdbqnSQhpBO_9C0_U8nWDQehqsE/s1600/Moon-Ramadan-Theme-.jpg
Eid Theme:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhthUtCiDWIkvGN1egdBa8PX4I1H8-jdZ5DzvILtFBa0fM0IZ9fKU76ABGOqhAcelqJb4Cio41fvp8htgrMVmnM2R3fxi07Fq_dVsK_-2CpjsIvepQ6CoSwYEPxTeY3NC5sLXC-_-clL4k/s1600/Eid-Theme.png
Zebra Stripes Theme:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJYTR_5PiVY3GludGP-S-YlW6qvjWtdJZmYM8o2SwZmPos2_96wAdatsAO9yK_e8dGGtt3pe_gyOkT0WhzI_mCwU6UrsDV6PULtYgKKbEqYm6PowiPDUAmcOfdQy8Mssr01NqW8fgA-h4/s320/Zeebra.png
Christmas Theme:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAms7dHZGRTH5X1JBL-0r2-EXh4mNSaWpIa6ZO38Qs7cAAFV4XKxKxNWK5A6aiIBilbDnP0SR2hx7ejSr6EY8_KcQxa-g8MsHzbyw0p9ngVB_Z86H_IdMXFvnGAC1pdRs4LIcEB68wlao/s1600/Tree-RED.png
Snow Flakes Theme:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWqegLOCDJP9ENY02gCdInBTO_pWDbkGPqszNiEJVb0wtulSV77lnVx8OQy6QE-q91KmRUTKCm6Tk8vgXG3xEXbyOy-ptYTI0nxbquDuR91Lv2ehzBEV_20sZFZOk770vsjrdXmIatBy4/s1600/SnowFall.png
From the Editors Desk:
So hope you have enjoyed the feast, if you think we missed out some
significant themes then just leave a comment and we would love to include them
in our list. However, soon we will going to introduce more Personalize Comment
form themes till then peace, blessings and happy designing.
Credits:www.mybloggertricks.com
Credits:www.mybloggertricks.com







Thanks Faizan, Nice Post ;)
ReplyDeleteNice collection bro. also your new design is really awesome I liked it just height of header is too small I will recommend you to use any image as logo insted of blog name.
ReplyDeleteThanks Rahul Ippar We are thinking to optimize few things! and your suggestion is noted down. Peace and Blessings
Delete@faizan
ReplyDeletebro being quite truthful i m really amazed by ur work , in such an age u r doing great !
introducing my self i m a mechanical engineering student at iit kanpur ; about 2 weeks ago i knew nothing about blogger but i was curious to make personal website for fun,learning,helping my classmates for ebooks ,etc. but had no idea about it.
But since i visited ur website i started blogging and also have greatly designed my blog using ur widgets ! pls have a visit yaar.......... :)
fadooharcourtians.blogspot.in
pls suggest if there is some missin or wrong abt it ,thanks in advance bro ,keep going !
Great post, is there any way we can change the Publish and Preview buttons with java-scripts and such?
ReplyDeleteit is not working for me all i done but i did not find this code in my comment class='comment-form'> ''
ReplyDeleteplzzz help me : http://onlinesoftweb.blogspot.com
Your Template has Different Style Search For <div id='mbt-form'> and Replace it with <div id='mbl-comment'> . Hope that Help. Peace
DeleteDear Sir I try this with your new Code but it is not working for me again i m very said about this.Sir If you have tested blogger lab then plz try to resolve this problem with me. thanks waiting for your kind reply..
ReplyDeleteThe problem is that you have different coding so Send me Your Template in XML Format @ contact.mybloggerlab.com you can upload your theme at any FREE Hosting like mediafire.com
DeleteSir XML Format means? and Sir thanks I m going to Sending your my Template HTML Coding @ contact.mybloggerlab.com
ReplyDeleteNo No Go To Template >> Backup/Upload >> Download Full Template. And Then Send that Downloaded File To Contact.mybloggerlab.com Peace
DeleteSir thanks I was sent you the media fire tmeplate link.waiitng for your kindness dear brother.Many Blessings to you.
ReplyDeleteWe have got your Email Will let you know Shortly.
Deletethanks brother i need & wish this background theme
ReplyDeletehttp://1.bp.blogspot.com/-cn7DU3xalss/UBLfTrfRImI/AAAAAAAADfg/AJ3NcEbp4_Q/s1600/Moon-Ramadan-Theme-.jpg
Love & Blessings to you!!
Excellent web site you have got here.. It's difficult to find excellent writing like yours nowadays. I really appreciate individuals like you! Take care!! Feel free to surf my website ; Remove Background
ReplyDeleteThanks for the post, but I think you had a bit miss-type:
ReplyDelete(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.
I'm sorry. I've done what you said over and over again. Matter of fact, I tried other posts and their suggestions too - nothing I do changes my comment area. It's grey and uses the same font color as my posts do which is a conflict - help??!!
ReplyDeleteCan you Provide your Blog URL. and this only works with those commenting system which are custom and are not tweak by anyone.
DeleteHello there ... nice code m8 ..
ReplyDeleteIn my blog its working only in posts with no comments ...
When you write a comment on the post its not working ...
Can you help ?
What's your Blog URL?
DeleteI can't use the code as I already have "the random bottom" code above
ReplyDelete(]]> < / b :skin>) ..or that's how it seems
I'd be glad for help :)
http://jasminfabe.blogspot.ch/
So how comes you didnt customize yours? ive tried in every possible way to make this work and it still displays white. there is no way to change it . i am getting pretty upset. your solution is the same as houdred of pages and it only gets to change the background of the comment box but not the whole iframe as in your pictures. I dont know what else to do.
ReplyDeleteHi,
DeleteSorry but this trick no longer works!