Create a Customized Text Area In Blogger Using Simple CSS

Summarized and precise posts are always appreciated by both visitors and search engines. Text Area or Text Boxes are indeed an easy way to share large bulk of codes with your readers. Bloggers who write tutorials in designing or development field, often share CSS, HTML, XML and JavaScript codes inside a BlockQuote. This method can surely be adopted but only for showing short codes or written text but if you want to share really long and bulky codes then the only way to keep your page load-time low and yet share such long codes is to use Text Areas.

How 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. Now see this demo –> Customized Text Area

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

• 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,

<span style="color:#009900;"><strong>WRITE-TEXT-HERE</strong></span>
 
Press "Ctrl + A" to Select and "Ctrl + C" to Copy 

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;

}

code