July 27, 2012

How To Customize Theme of Blogger Comment Box

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

23 comments:

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

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

      Delete
  2. @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 !

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

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

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

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

    ReplyDelete
    Replies
    1. 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

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

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

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

    ReplyDelete
  8. 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!!

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

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

    ReplyDelete
  11. 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??!!

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

      Delete
  12. 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 ?

    ReplyDelete
  13. 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/

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

    ReplyDelete

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.