Change Blogger Threaded Comment Box Background

Tweet

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. How to Do This?         Log on to blogger.com        Go to dashboard->template->edit html->proceed->tick expand widget template box     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. Here am giving you some more images for your blogger comment box background with their url link respectively. http://3.bp.blogspot.com/-gVaIE7KQtNQ/URKWtlLcrZI/AAAAAAAAAY4/7l0sUmyK53M/s1600/Resized-FTR9D.jpg http://1.bp.blogspot.com/-SHdH23wquEQ/URKXj-E16sI/AAAAAAAAAZY/QBMjMUl9VUI/s400/Comment-Box.jpg http://3.bp.blogspot.com/-CaUBOXyF8jg/URKWu4I3YGI/AAAAAAAAAZA/Gg34-o5wgT0/s640/Resized-DW6WV.jpg http://3.bp.blogspot.com/-3x6H6HVuf5U/URKWzBiWyDI/AAAAAAAAAZQ/EaC29VlCPx4/s1600/Resized-NJ8GV.jpg http://4.bp.blogspot.com/-faeEBpIYYLo/URKWsCQQZiI/AAAAAAAAAYo/AfJGeBGg8GM/s1600/250x250rain.gif http://4.bp.blogspot.com/-8LzP1LYblaw/URKX-YM5jDI/AAAAAAAAAZ4/y3-NrpVZZw8/s400/Seamless_Brick_Texture_by_Paradise_Awaits.jpg http://4.bp.blogspot.com/-beKzlSw8h9g/URKWsd2oMdI/AAAAAAAAAYs/8w8c_wvcUJY/s1600/Resized-6TUK6.jpg http://3.bp.blogspot.com/-e4q8McoV0tQ/URKWx3Rk0xI/AAAAAAAAAZI/0uBcqr-r1cQ/s1600/Resized-SIQGI.jpg http://1.bp.blogspot.com/-YrlDUJI8xhY/URKWo8oH_nI/AAAAAAAAAYg/Y440ecjMTbg/s1600/Resized-39UEV.jpg http://1.bp.blogspot.com/-hNDpR15Uek8/URKXrJzBfeI/AAAAAAAAAZg/bhLjj0xUX5s/s1600/comment.jpg Hope you enjoyed this tutorial.If yes then why don’t you make a try on your blog,I bet it’ll improve your blog’s looks and will attract your reader to comment.Happy blogging!!!!

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.

How to Do This?

•         Log on to blogger.com
•        Go to dashboard->template->edit html->proceed->tick expand widget template box
•     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.

Here am giving you some more images for your blogger comment box background with their url link respectively.

http://3.bp.blogspot.com/-gVaIE7KQtNQ/URKWtlLcrZI/AAAAAAAAAY4/7l0sUmyK53M/s1600/Resized-FTR9D.jpg

http://1.bp.blogspot.com/-SHdH23wquEQ/URKXj-E16sI/AAAAAAAAAZY/QBMjMUl9VUI/s400/Comment-Box.jpg

http://3.bp.blogspot.com/-CaUBOXyF8jg/URKWu4I3YGI/AAAAAAAAAZA/Gg34-o5wgT0/s640/Resized-DW6WV.jpg

http://3.bp.blogspot.com/-3x6H6HVuf5U/URKWzBiWyDI/AAAAAAAAAZQ/EaC29VlCPx4/s1600/Resized-NJ8GV.jpg

http://4.bp.blogspot.com/-faeEBpIYYLo/URKWsCQQZiI/AAAAAAAAAYo/AfJGeBGg8GM/s1600/250x250rain.gif

http://4.bp.blogspot.com/-8LzP1LYblaw/URKX-YM5jDI/AAAAAAAAAZ4/y3-NrpVZZw8/s400/Seamless_Brick_Texture_by_Paradise_Awaits.jpg

http://4.bp.blogspot.com/-beKzlSw8h9g/URKWsd2oMdI/AAAAAAAAAYs/8w8c_wvcUJY/s1600/Resized-6TUK6.jpg

http://3.bp.blogspot.com/-e4q8McoV0tQ/URKWx3Rk0xI/AAAAAAAAAZI/0uBcqr-r1cQ/s1600/Resized-SIQGI.jpg

http://1.bp.blogspot.com/-YrlDUJI8xhY/URKWo8oH_nI/AAAAAAAAAYg/Y440ecjMTbg/s1600/Resized-39UEV.jpg

http://1.bp.blogspot.com/-hNDpR15Uek8/URKXrJzBfeI/AAAAAAAAAZg/bhLjj0xUX5s/s1600/comment.jpg

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

Kindly Bookmark and Share it: