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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL-CHv7LV4MBE6jhSAcelHSXOLgvysALNGA8EU_uM_z7WzHN5t1n3TTcZ3mRGNXKOfWP94MXY1Y-EF8AcOgHLrJaXV9iflEnp0sfr9MArBhxU1kqDaERbbhwzDUM82vjlmFfijyikZ2VV5/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4tJbpeQzpw-Bnz14qWlRRCBNkW4suWNif45ECpqbXSPczpbJiT_PdkZ7J2lNVvv6RbSQB3o9sNz9y4-kluBaWw6JrC1cBZU326MN-0G1AWheDa3J7iYchpXjt7L_HFUKncKNIm40kkz1-/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
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL-CHv7LV4MBE6jhSAcelHSXOLgvysALNGA8EU_uM_z7WzHN5t1n3TTcZ3mRGNXKOfWP94MXY1Y-EF8AcOgHLrJaXV9iflEnp0sfr9MArBhxU1kqDaERbbhwzDUM82vjlmFfijyikZ2VV5/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4tJbpeQzpw-Bnz14qWlRRCBNkW4suWNif45ECpqbXSPczpbJiT_PdkZ7J2lNVvv6RbSQB3o9sNz9y4-kluBaWw6JrC1cBZU326MN-0G1AWheDa3J7iYchpXjt7L_HFUKncKNIm40kkz1-/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.
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 |
thanks for this information...
ReplyDeleteLibgen Proxy sites
Techwiki