Blogger Comment Box Black Background Theme

I will be publishing several pattern themes for Blogger Comment form this month. Everything looks good when you present it in a way that may seem appealing. 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 was amongst MBT's many innovative shares and today we will take a step further by releasing different color themes 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 Theme"

Blogger Comment Box Series

1. Customize Blogger Comment Form

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

3. Over 1000 Background Themes For Blogger Comment Box!

4. Expand/Contract 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" box
4. Search for this,

]]></b:skin>

    5.     Just above it paste this code,

#mbt-form iframe{
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwW662-OsseSkAiPAeo0Gv0M_WBRbSYuNMOS3Cz4BZyzABX8lsAesdOAM8Ilrh77cx8oKRtVqRjSZ8-qJJ1_0KlFMvnU3jT3iiVwyXqeZRN5tkfbSTwB6XTTMvhLC9Qc_-s7zzcI9PLLY6/s400/11.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;
}
#mbt-form a{
color:#fff;
}

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 variations will be released soon. If you wish you can check my old tutorial for previous design codes. We are designing some unique patterns and I am sure you will like them. For the time being I would rather prefer keeping you all a little thirsty for new designs to arrive. Till then enjoy this new look of your comment forms. Have fun buddies! :)

SHARES

Share

Pin it

Tweet

Share

Share

Print

Buffer

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

Mohammad 9/17/2011