11 February 2013

Change Blogger Threaded Comment Box Background


 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.


      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

      9 comments: Leave Your Comments

      1. Hey Debarpana ,
        Cool Comment box man, I will add to my blog as soon as possible :):)Thanks for the post !!

        1. Thanks buddy but my name is Debarpan not Debarpana :P

      2. great information especially to those using bloggers! i ma currently happy using my wordpress keep it up1 xx

      3. Nice tips for those bloggers user, I'll be stick with wordpress platform.

        suggestion: larger image (that fit the space nicely) and more consistent font size may ease a lot on your readers' eyes.


      4. thanks for this. im planning to change the look of my blog by now..

      5. Cute designs! Might try tweaking my blog with this. :)

      6. I m just going to add dis 2 my blogger .. thnxxx for dis...

      7. Greetings! I was searching the internet before I got into this blog! I after a long time found the thing I had been searching for. I definitely like your domain! Domains with so correct text are much easier to read. I do recommend you to keep it up. It was my pleasure to check your post! Navigate to my site and get totally freeware
        pes 2013 patch and
        psn card generator.
        Bye. :D