Change Blogger Threaded Comment Box Background

We all bloggers always try to make our blog’s design looks better,to attract our visitor and the comment section of our blog take a big part on it.So from that thought I also become interested to make my blog’s comment section  more attractive. so now it’s time to change the background of blogger threaded comment box background .After googling I found many tutorial on how to change the blogger  comment box background but none of these effect blogger’s new threaded comment system,may you too feel that.So,after trying somedays I solve it by making a css code and here am going to share this with all of you.I bet you'd love that tutorial cause it'll definitely make your blogger comment section much more beatiful and attractive.

 Must Read : Show Comment Box Above Comments on Blogger

Change Comment Box Background

• First Log on to blogger.com
• Then Go to dashboard->template->edit html->proceed->tick expand widget template box
• Next Search[ctrl+f] for “]]></b:skin>”

Just above it paste the following code

#comment-editor{ background:#ffffff url(http://2.bp.blogspot.com/-nvs8ifZy9o8/ToB8Oh9jvoI/AAAAAAAAAO0/fPxeGXUTsG0/s1600/12.png) repeat-x; border:1px solid #ddd; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; box-shadow: 5px 5px 5px #CCCCCC; padding:5px; font:normal 12pt "ms sans serif", Arial; color:#2F97FF; width:540px; height:214px !important; } #comment-editor a{ color:#fff; }

•   Now save the template and you’re done.

Customization

background: This property is responsible for the background color, background image Where,

• #ffffff : This is the background color. You can change it.

border: This CSS property defines the border size/width, style and color of the comment box. I have set these values for the Comment form in active mode.

• border size to 1px,
• border style to solid. You can choose solid, dotted, dashed etc.
• border color to  #ddd.

padding: This CSS property is responsible for the distance/gap between the Comment Form border and its text area. You can increase this value if you wish to insert an image at top right or top left corner of the form.
font:  This CSS property defines the boldness, font family and the size of the text. I have set the following for the text “Comment as:”

• boldness to normal,
• size to 12pt 
• font family to  "ms sans serif". If in case the browser doesn’t has the "ms sans serif" font then I have set Arial as a backup.

color: This property defines the color of the text “Comment as:” . Use our Color Chart for changing the text color.

width: This property sets the width of your Comment Form.



 Must Read : Highly Customized Blogger Comment System

Hope you enjoyed this tutorial.If yes then why don’t you make a try on your blog,We bet it’ll improve your blog’s looks and will attract your reader to comment.Happy blogging!!!!

Articles You May Like