--> Blogger Comment Box Black Background Theme | Experience Lab - Online business creation and development guide for bloggers and startups

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



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/AVvXsEhCq1tUcvLFIOCWdLxJ5IdrHBDKcSGDjQ25gN9kXSFgBQDjahIsA6fBZbhUuxXDxQMwL-nwFd4mKpt3gNdWcrKJxOsXmeaVO9CtTxffhWaiSEOVngHmZzs9V1tfONmfLcdTek_Qsb2LdwUl/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! :)

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Blogger Comment Box Black Background Theme
Blogger Comment Box Black Background Theme
http://lh6.ggpht.com/-KFV6_9jvYek/TnPCieHlHDI/AAAAAAAAFFQ/0WJLKxLR-U8/image%25255B18%25255D.png?imgmax=800
http://lh6.ggpht.com/-KFV6_9jvYek/TnPCieHlHDI/AAAAAAAAFFQ/0WJLKxLR-U8/s72-c/image%25255B18%25255D.png?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2011/09/blogger-comment-box-black-background.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2011/09/blogger-comment-box-black-background.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy