How To Create TextBox Or Textarea In Blogger Blogspot

0
How To Create TextBox Or Textarea In Blogger Blogspot - 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.

simple css, textbox, textarea, html blogger textbox, blogspot textarea

Learn how to add cool effect to text areas. Follow the steps below to add a highly stylized and customized text area in your blogger blogspot.

How To Add Textarea/TextBox 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 {
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;
}
Save your template!

How To Display or Use TextBox Or Textarea in Your Blog 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.
add textarea in blogger, add textbox, blogspot, html, css

How To Customize Text Box Or Textarea In Blogger?

If you wish to change the font, Color or in short the entire look of the Textbox 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 it!
Conclusion:
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.

You might also like: How To Add Html Text Box and Textrea in Blogger Post
How To Add Links Hover and Rollover Effects In Blogger Blogspot
What Is A Blog and How to Create A Blog On Blogger
Tags

Post a Comment

0 Comments
Post a Comment (0)
To Top