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
About the Editorial TeamThe Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).
23 comments
Thanks Faizan, Nice Post ;)
Nice 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.
Thanks Rahul Ippar We are thinking to optimize few things! and your suggestion is noted down. Peace and Blessings
@faizan
bro 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?
it is not working for me all i done but i did not find this code in my comment class='comment-form'> ''
plzzz 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
Dear 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..
The 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
Sir XML Format means? and Sir thanks I m going to Sending your my Template HTML Coding @ contact.mybloggerlab.com
No No Go To Template >> Backup/Upload >> Download Full Template. And Then Send that Downloaded File To Contact.mybloggerlab.com Peace
Sir thanks I was sent you the media fire tmeplate link.waiitng for your kindness dear brother.Many Blessings to you.
We have got your Email Will let you know Shortly.
thanks brother i need & wish this background theme
http://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
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.
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??!!
Can you Provide your Blog URL. and this only works with those commenting system which are custom and are not tweak by anyone.
Hello there ... nice code m8 ..
In 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?
I can't use the code as I already have "the random bottom" code above
(]]> < / 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.
Hi,
Sorry but this trick no longer works!
Post a Comment
We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.