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(http://4.bp.blogspot.com/-mNhAkLamIz8/TnOlHefpjzI/AAAAAAAAFFE/agkd-EA7pUA/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! :)

Need Quick Help within 24 Hours? ASK NOW



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 »

25 comments : Post Yours! Read Comment Policy ▼
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. Whoa.. Mohammad, Good job..
    Have a look at my Comment Box here!!
    Modified it with great difficulty. :)

    www.ProHacker.IN

    ReplyDelete
  3. @ louie :

    I guess NO!! :)
    You can try using DisQus.. :)

    Have a look at my blog www.ProHacker.IN which has a DisQus like comment boxes. :)

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

    ReplyDelete
  5. thanks friends nice css design tips for every new blogger i liked your work thanks again. Blogger Solutions

    ReplyDelete
  6. @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
  7. 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
  8. Brother, I just want to make u aware that the clock Learn more link shows the same problem as mine has been shown that a few days ... So just look at this issue.

    ReplyDelete
  9. Thnxxxxxxxx Brother For This Code

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

    Great Hack.

    ReplyDelete
  11. [URL=http://glowtxt.com/][IMG]http://img217.imageshack.us/img217/8908/d4fa7a461a017b794162e17.gif[/IMG][/URL]

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

    ReplyDelete
  13. 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
  14. 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
  15. Je suis très ravi de vous écrire pour vous tirer chapeau pour ce beau travail, seulement pour ce bloc de commentaire, ça n'a pas marché pour moi. J'ai suivi toutes les étapes. Je serais très ravi si vous m'aidez à installer cette jolie boite noire de commentaires.mon blog est:(http://abbeslabdelli.blogspot.com/); merci d'avance!

    ReplyDelete
  16. 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
  17. Assalamualaikum warohmatullahi wabarokatuh.maaf yang diatas salah ketik.Mohon bantuan jawabannya pak Muhammad.

    ReplyDelete
  18. This comment has been removed by the author.

    ReplyDelete
  19. Its nice as u explained but in mine blog such codes are not found..
    so How do I do it.. plz check mine once suggest me to change in
    http://www.arabie3lan.com الشيخ الروحاني
    which part so that i can obtain as you explained here.

    ReplyDelete
  20. 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
  21. 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