Tuesday, August 14, 2012

Pin It

Widgets

How To Customize Blogger Comment Box By CSS Code.

 
First see few stylish Blog commenting box. Now we will learn how to make our blogger simple comment box to this kind of stylish blog comment box.I will provide you some  CSS code what you should put as our recommendation them see.Don't think more about it just follow bellow steps.Though bellow Following CSS code is for the Comment Form With a Baby in it. Other CSS codes will be provided to subscribers only. If you haven’t subscribed yet kindly subscribe now and inform us by leaving a comment with your Email ID.

Follow these steps,

   1, Go To Blogger > Layout > Edit HTML
   2. Check The Box “Expand Widget Templates” at the top right corner.
  3.  Search for the code below,                                  Tip:- Press Ctrl + f

    <div class='comment-form'>

     4.   Replace this code with the code below,

    <div id='mbt-form'>

     5.   Now Search for ]]></b:skin>
     6.   Just above ]]></b:skin> paste the  below colored CSS code,

  



  #mbt-form iframe{
    background:#ffffff url(http://3.bp.blogspot.com/_7wsQzULWIwo/Sx1aCAx_44I/AAAAAAAACeo/HZz8QQT0etM/s400/plz-do-not-spam1.gif) no-repeat bottom right;
    border:7px solid #C7C7C7;
    padding:5px; font:normal 12pt "ms sans serif", Arial; color:#7EB2AC; width:450px; }
    #mbt-form iframe:hover{
    background:#ffffff url(http://1.bp.blogspot.com/_7wsQzULWIwo/Sx1Zs5rasXI/AAAAAAAACeg/0fBam5AkHS0/s400/plz-do-not-spam2.gif) no-repeat bottom right; border:7px solid #7EB2AC;
    }
    #mbt-form a{
    color:#7EB2AC;
    }

     7.     Save your template and view your blog to see a different touch :>
Customize The Blogger Comment Form To Suit Your Blog Layout
Now Lets discuss the important areas in the CSS code above to help you customize your Blogger comment form according to your preferences.
There are three important areas, which are,

    #mbt-form iframe
    #mbt-form iframe:hover
    #mbt-form a

Here are the details for each section
1.    Customization For Active Mode

    #mbt-form iframe

This part is responsible for the active appearance of comment box when mouse cursor is not hovered on it. It includes the following style properties,
background: This property is responsible for the background color, background image and background image’s position. Where,

    #ffffff : This is the background color. You can change background color by replacing this code by any other color code from  bellow Color Chart
    
url : This is the URL for the background image. I used the baby in this case. You can change this image with anything you like.
    
bottom right: This positions the background image. I positioned the baby on bottom right corner. You can position the image at bottom right or bottom left or top right or top left

border: This CSS property defines the border size/width, style and color of the comment box. You can change border color by replacing this code by any other color code from  bellow Color Chart

    border size to 7px,
    border style to solid. You can choose solid, dotted, dashed etc. See this page on border styles
    border color to  #C7C7C7.
You can change border color by replacing this code by any other color code from  bellow Color Chart

Color Chart :
#FFFFFF #FFFFCC #FFFF99 #FFFF66 #FFFF33 #FFFF00
#FFCCFF #FFCCCC #FFCC99 #FFCC66 #FFCC33 #FFCC00
#FF99FF #FF99CC #FF9999 #FF9966 #FF9933 #FF9900
#FF66FF #FF66CC #FF6699 #FF6666 #FF6633 #FF6600
#FF33FF #FF33CC #FF3399 #FF3366 #FF3333 #FF3300
#FF00FF #FF00CC #FF0099 #FF0066 #FF0033 #FF0000
#CCFFFF #CCFFCC #CCFF99 #CCFF66 #CCFF33 #CCFF00
#CCCCFF #CCCCCC #CCCC99 #CCCC66 #CCCC33 #CCCC00
#CC99FF #CC99CC #CC9999 #CC9966 #CC9933 #CC9900
#CC66FF #CC66CC #CC6699 #CC6666 #CC6633 #CC6600
#CC33FF #CC33CC #CC3399 #CC3366 #CC3333 #CC3300
#CC00FF #CC00CC #CC0099 #CC0066 #CC0033 #CC0000
 
#99FFFF #99FFCC #99FF99 #99FF66 #99FF33 #99FF00
#99CCFF #99CCCC #99CC99 #99CC66 #99CC33 #99CC00
#9999FF #9999CC #999999 #999966 #999933 #999900
#9966FF #9966CC #996699 #996666 #999933 #999900
#9933FF #9933CC #993399 #993366 #993333 #993300
#9900FF #9900CC #990099 #990066 #990033 #990000
#66FFFF #66FFCC #66FF99 #66FF66 #66FF33 #66FF00
#66CCFF #66CCCC #66CC99 #66CC66 #66CC33 #66CC00
#6699FF #6699CC #669999 #669966 #669933 #669900
#6666FF #6666CC #666699 #666666 #666633 #666600
#6633FF #6633CC #663399 #663366 #663333 #663300
#6600FF #6600CC #660099 #660066 #660033 #660000
#33FFFF #33FFCC #33FF99 #33FF66 #33FF33 #33FF00
#33CCFF #33CCCC #33CC99 #33CC66 #33CC33 #33CC00
#3399FF #3399CC #339999 #339966 #339933 #339900
#3366FF #3366CC #336699 #336666 #336633 #336600
#3333FF #3333CC #333399 #333366 #333333 #333300
#3300FF #3300CC #330099 #330066 #330033 #330000
#00FFFF #00FFCC #00FF99 #00FF66 #00FF33 #00FF00
#00CCFF #00CCCC #00CC99 #00CC66 #00CC33 #00CC00
#0099FF #0099CC #009999 #009966 #009933 #009900
#0066FF #0066CC #006699 #006666 #006633 #006600
#0033FF #0033CC #003399 #003366 #003333 #003300
#0000FF #0000CC #000099 #000066 #000033 #000000

No comments:

Post a Comment