How To Create a Text Box or Text Area In Your Blogger Post With Examples

In this tutorial you will find the solution for how you can add a text box or text area inside your blog post and here we also given some text box HTML codes, that you can use it in your blog. As you know to use HTML code in your blog post you need to use HTML instead of Compose while create a New Post or Edit a Post. The text box or text area is used for specific content such as JavaScript codes, HTML Codes, CSS Codes etc. which made your blogger post visitor to find it out easily. 

How To Create Text Box or Text Area or Text Outline In Your Blogger Post With Examples

Why Add Textbox or Textarea

As I said before this is normally used  to separate a specific paragraph, text, sentence or words etc. to help your website users to find out the specific words easily. The Text Area or Text Box or what ever you call it no matter is used in Blogger or in a web page to add any type of codes or some special contents.

How To Create TextBox or TextArea In Your Blogger Post or in your website page with examples of Text Box or Tex Area or Text Outline HTML Codes For Blog and Website.

How to Add HTML Codes in Your Blog Post?

• Go to the Blog and Create a New Post or Edit Existing.
• Now Click on HTML Tab to edit your blog post with HTML mode and here you can add any HTML code to design your post.
• Paste any one of these below Text Box or Text Area or Text Outline HTML Codes.
• Then Click on Preview and Save or Publish Your Post.

Examples:

Text Box With Right Scroll Bar HTML Code:

<div style="overflow: auto; width:300px; height:150px; padding: 10px; border:1px solid #ccc;">
This is a test sentence from Free Computer Tricks or www.freecomputertricks.in website to test TextBox or TextArea. Example of text box or text box for blogger HTML Codes, You can replace this with your sentence or paragraph. Thank you FreeComputerTricks (www.freecomputertricks.in) with right scroll bar
</div>

Result of Text Box With Right Scroll Bar:

This is a test sentence from Free Computer Tricks or www.freecomputertricks.in website to test TextBox or TextArea. Example of text box or text box for blogger HTML Codes, You can replace this with your sentence or paragraph. Thank you FreeComputerTricks (www.freecomputertricks.in) with right scroll bar

Text Border With Blue Line HTML Code:

<div style="border: 1px solid #0118FC; padding: 10px;">
This is a blue line border for your text, for text border decorating on your blog, use the above HTML Code for this border and use it on Blogger.com (www.freecomputertricks.in)</div>

Result of Blue Border Text Box:

This is a blue line border for your text, for text border decorating on your blog, use the above HTML Code for this border and use it on Blogger.com (www.freecomputertricks.in)

Blue Left Border and Light Blue Background Text Area HTML Code:

<div style="border-left: 20px solid #0174df;">
<textarea cols="50" rows="3" style="-moz-border-radius: 7px; background: #eff5fb; border: 1px solid #ccc; color: black; line-height: 1.5em; padding: 5px;">  TYPE YOUR TEXT HERE AND IT WILL LOOK LIKE THIS </textarea></div>

Result of Blue Left Border with Light Blue Text Background:

TYPE YOUR TEXT HERE AND IT WILL LOOK LIKE THIS

Black Text Area With White Letters:

<textarea cols="42" rows="3" style="background: rgb(0, 0, 0) none repeat scroll 0% 0%; border: 2px inset rgb(204, 204, 204); color: white; height: 68px; line-height: 1.5em; padding: 0px 7px; width: 396px;"> TYPE YOUR TEXT HERE AND IT WILL LOOK LIKE THIS  </textarea>

Result of Black Text Area with White Letters:
TYPE YOUR TEXT HERE AND IT WILL LOOK LIKE THIS

Green and Red Border Text Area HTML Code:

<textarea cols="40" rows="3" style="-moz-border-radius: 10px; background: #e0ecf8; border-bottom: 4px solid #fe2e2e; border-left: 4px solid #fe2e2e; border-right: 4px solid #01df01; border-top:4px solid #01df01; color: red; line-height: 1.5em; padding: 5px;"> TYPE YOUR TEXT HERE AND IT WILL LOOK LIKE THIS </textarea>

Result or Green and Red Color Text Box:
TYPE YOUR TEXT HERE AND IT WILL LOOK LIKE THIS

Dashed Lines Border Text Area HTML Code:

<textarea cols="42" rows="3" style="background: #a9f5a9; border: 2px #295f00 dashed; color:#295f00; line-height: 1.5em; padding: 5px;"> TYPE YOUR TEXT HERE AND IT WILL LOOK LIKE THIS </textarea>

Result or Dashed Line Text Box:
TYPE YOUR TEXT HERE AND IT WILL LOOK LIKE THIS

Conclusion:
So in this way you can create or add a text box or text area or text outline or text border inside you blog post to separate a specific paragraph or some texts. Here in this tutorial you will get to decorate a text box with examples and also you can get the text box HTML codes.