Create a Customized Text Area In Blogger Using Simple CSS

ow is a default text area looks like?

See an example of a text area below to get an idea of what it actually is.

This is how the text will appear inside a Text Box or Text Area, whatever you may call it

What’s New Here?

I am sure you didn’t like the grayish look of the box above and wish to add some colors and effects to it.

Lets now learn how to add this cool effect to our text areas. Follow the steps below to add a highly stylized and customized text area in your blogs,

Step 1.

Paste the code below just above

• Go To Blogger > Layout > Edit HTML
• Search for

• 
  
  </b:skin>
  
  
  
  
  
  
• Paste the next code above it.

    .mbt-textarea {



padding:0;



margin:0;



width:400px;



height:40px;



color:#0080ff;



font:12px arial;



background:#fff;



border:1px dotted #289728; }



.mbt-textarea:hover {



color:#289728;



border:2px solid #666; }



.mbt {



padding-top:3px;



margin:0;



color:#289728;



font-size: 9px;



font-family: sans-serif, verdana;



}

Now click Save Template and you are done!

How to use it in your posts

Now when ever you write a post use the HTML code below to display a text area,

<textarea class="mbt-textarea" readonly="readonly">WRITE-TEXT-HERE

You just need to replace WRITE-TEXT-HERE with your bulky code or text. The bolded black text appears below your text area and it instructs your readers how to easily select and copy your codes. If you don’t want this text to appear below the text box then simply delete the code in blue and black

How To Customize The Text Area

I am rewriting the CSS code above with explanation of each part,

.mbt-textarea {

padding:0;



margin:0;



width:400px;

height:40px;



color:#0080ff;



font:12px arial;



background:#fff;



border:1px dotted #289728; }



.mbt-textarea:hover {

color:#289728;

  border:2px solid #666; }



.mbt {

  padding-top:3px;



margin:0;



color:#289728;



font-size: 9px;



font-family: sans-serif, verdana;



}

1) If you want to decrease or increase the height or width of the text area, simply edit

width:400px;



height:40px;

2) To change the color of the text in active mode change the six digit code in this code,

color:#0080ff; (Use our Color Chart to use a color of your choice)

3) To change the color of the text in Mouse hover mode, edit this,

color:#289728;

4) To change the border width, style and color in active mode edit this code,

border:1px dotted #289728;



where, width is 1px, style is dotted and colour is #289728

5) To change the border look in mouse hover mode edit this,

border:2px solid #666;

6) To change font size and family, edit this,

font:12px arial;



where 12px is the size and arial is the default family that I have used.

7) To change the color and font size and family of the text “Press "Ctrl + A" to Select and "Ctrl + C" to Copy “ edit this code,

.mbt {



padding-top:3px;

margin:0;

color:#289728;

font-size: 9px;

font-family: sans-serif, verdana;

}

That’s All!

I hope this tutorial will help you greatly in controlling and styling your text areas in a far better way. Kindly do not hesitate to ask any question. Your question is more than an honor for us. Take care! :>