02 August 2011
Create Customized Html TextBox Textarea 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 BlackQuote. 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 Textareas.
Learn how to add this cool effect to text areas. Follow the steps below to add a highly stylized and customized text area in your blogs,
How To Add Textarea Box in Blogger Using CSS
1. Go to Blogger > Design > Edit Html
2. Press "Ctrl+F " Search for </b:skin>
3. And just above it paste the code below,
.blogger4ever-textarea {Save your template!
padding:0;
margin:0;
width:400px;
height:40px;
color:#0080ff;
font:12px arial;
font-weight:normal;
background:#fff;
border:1px dotted #2266bb;
}
.blogger4ever-textarea:hover {
color:#0080ff;
border:1px solid #E98313;
}
.blogger4ever {
padding-top:3px;
margin:0;
color:#e10000;
font-size: 9px;
font-family: sans-serif, verdana;
}
How To Use Text Area Box in Your Posts?
To display this customized text area you only need to add the following code in the "Edit Html" section of your Blogger Editor,
<textarea class="blogger4ever-textarea" readonly="readonly">YOUR-TEXT-HERE</textarea>
<p class="blogger4ever"><u>Press "Ctrl + A" to Select and "Ctrl + C" to Copy </u></p>
You just need to replace YOUR-TEXT-HERE with your code or text. The bolded Red text appears below your text area and it instructs your readers how to easily select and copy your codes. If you don't want to this text appear below the text box then simple delete the code in bloded Red.
How To Customize The CSS of The Text Box?
If you wish to change the font, color or in short the entire look of the text box then you just need to edit the following areas in the CSS code above.
Width:400px; This changes width size of the box
height:40px; This changes height of the box
color:#0080ff; This changes font color inside text box
font:12px arial This changes font size and font family
border:1px dotted #2266bb; This changes the border size, style (i.e dotted, solid, dashed) and color. Editing it will change the look of the border/outline across the text.
.blogger4ever-textarea:hover {
color:#0080ff; This changes font color on mouse hover
border:1px solid #E98313; This changes border size, style and color on mouse hover
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,
.blogger4ever {
padding-top:3px;
margin:0;
color:#e10000;
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.
About Author
Ahmed Shehzad Hi, I am the Founder and Editor of Blogger4ever, I loves writing about Blogger Tricks and Tips, Blogger Tutorials, Hacks and Widgets and everything about Blogger.... Follow me on Google+
Subscribe to:
Post Comments (Atom)
0 Responses to “Create Customized Html TextBox Textarea in Blogger Using Simple CSS”
Post a Comment