How to add a Text box to blogger post using HTML & CSS?

Have you ever see, bloggers use text boxes to present their data in their blog posts? Also, When we are blogging, sometimes we want to add a text box into our blogging post. 

This article will help you to put a text box in your Blogger Posts. Go to dashboard >> Post >> new Post and then enter "HTML Tab" while creating a post and paste below codes into the desired location & again switch to compose tab to view your text box. You can pick up any code as you expected as the image below the code.

1.       Sign into your Blogger account

2.       Click on Dashboard

3.       Then click on New post

4.       Now Open HTML Tab and enter the below code.

How to create a text box to a blogger blog?

For adding a text box into blogger post there are some simple codes that you can follow easily. The preview of the text box will be appearing below the HTML code.

1. To Create Editable Text box

<textarea rows="3" cols="10"> Type Your Text Here </textarea>

  

Type Your Text Here

2. To create a Read-only text box

<textarea cols="20" name="Privacy Policy" readonly="readonly" rows="5"> Type Your Text Here </textarea>

Type Your Text Here

3. To Create a Link Text box

<textarea> rows="5" cols="20" name="Link To Blog" readonly="readonly"> Type Your HyperLink Code Here </textarea>

rows="5" cols="20" name="Link To Blog" readonly="readonly"> Type Your HyperLink Code Here

Here some developed codes, with that codes you can add borders & background colors for your text box

4.      <div style="
         border: solid 5px #aaaaaa;
         background: #FF93E7;
         font-size: 18px;
         margin: 40px;
         padding: 30px;
         text-align: justify;
         ">
        Type Your Text Here
         </div>

Type Your Text Here

5. 

       <div style="
       width: 300px;
       height:70px;
       border:double 6px #00385B;
       ">
      Type Your Text Here
      </div>
      <br/>

Type Your Text Here

Attributes explanation:

·      The width attribute should be added (with values in pixels or percent, e.g. 500px or 67%) if the width of the whole border/frame is less than the text width.

·     The height attribute should be added (with values in pixels e.g. 500px) if you want a border/frame with exact height. Keep in mind, adding this attribute may result in text overflow. So, I recommend skipping this attribute.

·        After the border attribute has three types of values:

1.      Solid, alternatively, dashed, dotted, groove, ridge, double, inset and outset (read carefully the text inside the first 8 frames above),

2.      5px, which is the border width,

3.      #aaaaaa which is hex code for the border color.

·    The background attribute should be added if you want a colored background inside the text (DIY: try adding code without the border attribute).

·   The font-size attribute refers to the text size. Since this, you can shorten the text in the visual Blogger's adding going on an editor, you may skip this line in the above code.

·  The value after the margin attribute is the distance from each border such as top, bottom, right, and left, to the surrounding post elements That, usually above and below the border.

·    The value after the padding attribute is the distance from each border (top, bottom, right, and left) to the text inside the border/frame.

·   The text-align attribute controls the text alignment (left, center, right, justify) inside the borders. Since the text alignment can be controlled through the visual Blogger's post editor; you can skip this attribute too.

   

6. Controlling the width, height, and alignment of the border/frame 

<div align="center">
<div style="
border: double 5px #aaaaaa;
font-size: 24px;
margin: 40px;
padding: 30px;
width: 50%;
height: 150px;
">
Type your text here
</div></div>

Type your text here

also, try below codes. But not guaranteed about it

7.  <div style=”background-color: #d0f18f; border: 6px double orange; height: 100px; width: 200px;”>Type your text here </div>

8. <p style=”padding:6px; color: grey; background-color: white; border: black 2px solid”>Type your Text  Here</p>

9. <p style=”padding: 10px; color: red; background-color: white; border: black 2px solid”>Type Your Text  Here</p>

10. <p style=”padding: 10px; color: red; background-color: blue; border: black 2px solid”>Type Your Text Here</p>

Like the above text box also you can add Horizontally side by side images and draw a table in your blog post by using HTML code. 

I Hope the above 17 tips help you to add a Text box to blogger post using HTML & CSS? And if you have any problem or know more on this, Please share with us in the comments section below.