How to add a Text box to blogger post using HTML & CSS? - The WonderSpot - Know all in one spot
Breaking News:
Loading...

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

Add text box in blogger post

When we are blogging sometimes we want to add text box into our blogging post. So, 
Are you looking for how to adding Text box into your blogger post??? Then let see How to create a text box to blogger blog,

How to add a Text box to blogger post using HTML & CSS?
This post will help you to put text box in Blogger Posts. Just enter "HTML Tab" while creating post and paste below codes into 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 Dash board 
  3. Then click on New post 
  4. Now  Open HTML Tab  and enter below code.

For add a text box into blogger post there are some simple codes that you can follow easily. The preview of 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>
  



2. To create Read only text box

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




3.To Create Link Text box

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





Here some developed codes, with that codes you can add borders & background co lours 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 that adding this attribute may result in text overflow. So, I recommend skipping this attribute.
  • After the border attribute has are 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 widht,

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
       a code without the border attribute).
  • The font-size attribute refers to the text size. Since this you can edit the text in the visual Blogger's post
       editor, you may skip this line in the above code.
  • The value after the margin attribute is the distance from each border (top, bottom, right and left) to the
      surrounding post elements (usually above and below the border/frame).
  • 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 trough 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>

Ok friends now i thin you have a better understand about how to add text box in blogger post.
Enjoy your blogging.

How to Insert Images Horizontally Side by Side in Blogger Blog post?............>>>>

How to draw a table in blogger blog?




For more reading THEWONDERSPOT



How to start a Blog?....................................................................................>>>

How to make your blog SEO friendly?............................................>>>

Thank you for reading - How to add a Text box to blogger post?
Good Luck.

Don’t forgot to Subscribe us to get latest news letters and give your feedback in below comment section ;-) ;-)

Post a Comment

0 Comments