How to make HTML Text Box With Hover Effect in Blogger

How to Add HTML text box with Hover Effects

• Sign in to your Blogger account
• Then goto Blogger Dashboard >>Template>Edit HTML
• Press Ctrl+F atonce ,a box will apear and Find this code ]]></b:skin> in your template HTML editor
• Now paste the CSS Code before/above on ]]></b:skin>
• Save your template 

Demo Here With CSS Code

#BL_textarea1{border:1px solid green;-moz-border-radius:0px;border-radius:0px;background:#ccc;float:left;overflow:auto; text-weight:normal;font-size:12px;font-family:arial,"times new roman", helvetica;opacity:0.4;width:600px; height:135px; padding:8px 4px 2px 4px;margin:5px 3px} #BL_textarea1:hover{border:2px outset #56FF32;-moz-border-radius:8px;border-radius:8px;background:#ccc;font-weight:bold;opacity:0.8}

When you make a post then Press HTML Button and add this code

<textarea id="BL_textarea1" readonly="readonly" >
Enter your Text or any codes here....
</textarea>

You Can change the width and height of text box "width:600px" and "height:135px" are used in above css code and you can change it according to your own desire. Also you can change font size by changing in this code "font-size:12px" change the size of text as you like better.