Blogger Comment Box Black Background Theme

blogger comment boxI 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
2. Comment Form with Black Background Theme - Just like ours!


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:
black theme
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! :)

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 »

16 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. hi mohammad and thank you for your help!!

    is there any way to add to my blogspot either a comment box like wordpress or an other comment box that conteins only email, name and the message???
    ( for example something like the following here: http://polldaddy.com/poll/4804554/?view=results)

    thanks a lot in advance!!!

    ReplyDelete
  2. when we need to replace link must do expand widget otherwise code will not show

    ReplyDelete
  3. @louie

    Brother that format is only avaiable in wordpress blogs but do not worry because very soon blogger will introduce this feature. Though if you customize your comment box as I shared above then it will look more neater.
    You can also try the facebook comments box if you wish.

    @M.pinto
    Wow nicely done buddy. This gave me more ideas. :)

    @Umer
    Could you please explain your question brother could not get it.

    @Anil
    You are most welcomed anil. Thanks for your kind comment. :>

    ReplyDelete
  4. Modh.
    Brother i just want to make u aware that ur READ MORE link is showing the same problem as mine was showing few days back ...so just look into this issue ..ASAP !!!

    Love n blessings
    priyanka

    ReplyDelete
  5. Thank You So Much For This So Easy To Install This Widget.

    Great Hack.

    ReplyDelete
  6. Wow it's work great for me and thanks a lot for this tricks ^_^

    ReplyDelete
  7. i deleted the default commenting system unknowingly , can any one tell how can i get it back ? :( i dint backup my template!!
    www.pctipstricks.in

    ReplyDelete
  8. hi
    i am use html in my website
    i want to setup this comment box widget
    can any one help me to setup this widget for my website
    plz .. plz help me ...

    ReplyDelete
  9. assalamualikum,mau tanya pak kenapa untuk turorial ini saya tidak bisa terapkan di blog.Padahal untuk tutorial lainnya bisa.Saya pakai template sallahuddin ayubi.Mohon bantuan pak.Terima kasih sebelumnya.

    ReplyDelete
  10. Assalamualaikum warohmatullahi wabarokatuh.maaf yang diatas salah ketik.Mohon bantuan jawabannya pak Muhammad.

    ReplyDelete
  11. Dear my comments not shown in my comment box help me how to show them
    have a look at mine blog please
    http://crackedmecher.com

    ReplyDelete
  12. Try as I might, I cannot get the commenter (they show as a link) to show up as a different color. Those links are as dark as the background color itself and not viewable.

    ReplyDelete