How To Create HTML / CSS Text Box In Blogger Blog

 

Hey: fave day ago i wast posted an article about “How To Add html Incoder Tool in Blogger Blog“and I believe that you are done,now you can easily highlight your “html code” in your blog post any where,But you want to give your highlighted text different styles look then this post is for you, in this article we will learn “how to add html or css text box in blogger blog”it’s necessary for professorial blog/website, because through the css code you can create different type of text box, to attract your visitors, i know that there that there are many ways in blogger blog to highlight text, some blogger use JavaScript code to highlight the code, and some blogger use text highlighter widget,but html and css txt box is very simple way to give your highlighted text box attractive look, this box is so simple you can easily customize the text box lets see .

Create HTML CSS Text Box

There are few example how to create styles css text box, by using CSS you give the different type of style,
like if you want to create a text box with an attractive border then you can add this code to your blog or website.

<!– css text box by nafisflahi–>

<div style=”width:200px;height:100px;border-width:6px;border-color:blue;border-style:dotted dashed solid double;”>
attractive boarder

The Result will be like this text box

You can easily customize this text box you can add own “text box” width height and background color

there is a second CSS text box with the double border, to add this text copy the code and past it into your blogger blog or website.

 <!– html text box by nafisflahi–>
<div style=”background-color: #d0f18f; border: 6px double orange; height: 100px; width: 200px;”>
Dabble boarder text box with background color </div>

The Result will be like this text box

If You want to create a text box with scrollbar then copy this code and past it into your blogger blog or website

<!– css text box by nafisflahi–>

<div style=”background-color: olive; border: 3px groove orange; font-family: georgia; font-size: 16px; height: 200px; overflow: scroll; width: 500px;”>
Enter your text here </div>

The Result will be like this box

Create Simple HTML text box

To create a simple text box just copy the code and past it into your blog post

<! — Simple HTML box by nafisflahi –>
<textarea>

this is basic html text box
</textarea>

The result will be like this box

simple text box

If you want to write more text then you can easily create a automatic scroll bar with your text-area by adding this text box code.

<!– html text box by nafisflahi–>
<textarea cols=”50″ rows=”10″>
This is automatic scroll text box
</textarea>

You can change columns and rows as you need,
The result will be like this box

This is automatic scroll text box

If You want To give your text box height and width then add this code

<!– html text box by nafisflahi–>
<textarea cols=”20″ rows=”8″ style=”height: 143px; width: 292px;”>
This is automatic scroll text box
</textarea>

I hop now you can easily create a different type of “HTML text box” and able to give the text box attractive look