How To Customize Theme of Blogger Comment Box

Advertisements
Do you ever imagine of optimizing your Blogger Comment Box? Although, Google developers are working hard to improve its feature and results can be seen in Blogger New interface. Blogger commenting system is the only element, which necessities some sort of enhancement. To make our blog more successful we need frequent commenters, more than loyal readers. The only way to keep your old article alive is to reply to the Comments, but if you aren’t getting any comments then surly the post will die in quick succession. Today we will optimize our Blogger Comment Box, so users don’t hesitate while publishing a comment. 

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
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

24 comments

July 27, 2012 at 10:03 PM

Thanks Faizan, Nice Post ;)

July 27, 2012 at 11:19 PM

Ohhh Super Collection :) Comments Labs :P

July 28, 2012 at 6:25 AM

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.

Editorial Team MOD
July 28, 2012 at 7:10 AM

Thanks Rahul Ippar We are thinking to optimize few things! and your suggestion is noted down. Peace and Blessings

July 29, 2012 at 10:54 AM

@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 !

July 31, 2012 at 8:05 AM

Great post, is there any way we can change the Publish and Preview buttons with java-scripts and such?

September 10, 2012 at 10:53 AM

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

Editorial Team MOD
September 10, 2012 at 12:06 PM

Your Template has Different Style Search For <div id='mbt-form'> and Replace it with <div id='mbl-comment'> . Hope that Help. Peace

September 10, 2012 at 12:26 PM

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..

Editorial Team MOD
September 10, 2012 at 12:36 PM

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

September 10, 2012 at 12:43 PM

Sir XML Format means? and Sir thanks I m going to Sending your my Template HTML Coding @ contact.mybloggerlab.com

Editorial Team MOD
September 10, 2012 at 12:45 PM

No No Go To Template >> Backup/Upload >> Download Full Template. And Then Send that Downloaded File To Contact.mybloggerlab.com Peace

September 10, 2012 at 1:01 PM

Sir thanks I was sent you the media fire tmeplate link.waiitng for your kindness dear brother.Many Blessings to you.

Editorial Team MOD
September 10, 2012 at 1:16 PM

We have got your Email Will let you know Shortly.

September 10, 2012 at 1:19 PM

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!!

October 10, 2012 at 5:32 AM

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

November 15, 2012 at 7:03 AM

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.

April 6, 2013 at 1:01 PM

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??!!

Editorial Team MOD
April 7, 2013 at 2:00 AM

Can you Provide your Blog URL. and this only works with those commenting system which are custom and are not tweak by anyone.

May 1, 2013 at 1:35 PM

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 ?

Editorial Team MOD
May 2, 2013 at 1:41 AM

What's your Blog URL?

January 18, 2014 at 11:48 AM

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/

January 23, 2016 at 3:18 PM

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.

Editorial Team MOD
January 24, 2016 at 11:06 AM

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.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.