Black Background Theme for Blogger Comment Box

This is the first time I will write a series of posts on one topic. I would accept that BlogSpot blog does not have a good commenting system but you can use the same Comment box and turn it into something creative and far beautiful than the comment forms of WordPress blogs. Customized Blogger Comment boxes will be amongst MBT's many innovative shares and today we will take a step further by releasing a very different color theme by using different patterns of images. Modern CSS3 properties like box shadow and rounded corners will also be applied to the comment body to make it stand out. So lets try our first theme of the month which is named "Black Comment Back"

Blogger Comment Box Series

1. Comment Form with Black Background Theme - Just like ours!

2. Expand/Collapse Blogger comment Box with jQuery

Note

The custom codes styles discussed below are the most I could try. No further customization could be applied like changing the font size and color inside the comment box though I managed to change the text and link color outside the text area. Hope you will like it.

Apply Black theme To Comment Box

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Click the  Expand Widget Templates
4. Search for this,

]]></b:skin>

     5.  Just above it paste this code,

#mbt-form iframe{
    background:#ffffff url(http://4.bp.blogspot.com/-8p1NYlqlff0/UOQs979UxlI/AAAAAAAABGA/P28NSCr3V44/s1600/MHT+Blogger+Comment+Box+Background.png) repeat-x;
    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;
}

To change the color of the text "comment as" simply edit 2F97FF and to adjust the width of the box then edit width:560px . Leave other things as it is for better and clean look.

     6.    Next search for this,

<div class='comment-form'>

     7.   Replace it  with the code below,

<div id='mbt-form'>

    8.   Save your template and you are all done!

Outcome

More widgets will be released soon. We are designing something unique and I am sure you will like it. Till then enjoy this new look of your comment forms. Good Luck! :)