How to Create a Text Box in a Blog Posts

In blog posts or websites, we often encounter the display of text or paragraphs in a box so that it looks more attractive and easy for visitors to read.

In order for our blog to seem neat and lively, we need a script box or text box. Besides that, readers can also distinguish which articles or scripts are. Not only that, the script box can also be used for important notes and blockquotes in posts. 

What is a Script Box or Text Box

Script box or Text Box is a box in which it can be filled with scripts or important notes made with HTML tags and a little design using CSS so that the script box made looks colorful and attractive which can attract blog visitors comfortably when viewing a post. 

Making a script box or text box, actually is not difficult. You just need understand HTML and CSS at first. So, here are a variety of script box views that you can use.

How to Crate a Script Box in a Blog or Website

Basic Script Box

Style #1

<div style="background-color: #f6f6f6; border: 1px solid #009ee0; padding: 17px; text-align: left;"> Script here... </div>

Style #2

<div style="background-color: #f6f6f6; border: 1px solid #009ee0; border-radius: 0 10px 0 10px; padding: 17px; text-align: left;"> Script here... </div>

Style #3

<div style="background-color: #f6f6f6; border-left: 5px solid #009ee0; padding: 17px; text-align: left;"> Script here </div>

 

Style #4

<div style="background-color: #f6f6f6; border-left: 5px solid #009ee0; border-radius: 10px; padding: 17px; text-align: left;"> Script here... </div>

 

Style #5

<div style="background-color: #f6f6f6; border: 5px solid #009ee0; padding: 17px; text-align: left;"> Script here... </div>

 

Style #6

<div style="background-color: #f6f6f6; border: 5px #009ee0 Double; padding: 17px; text-align: left;"> Script here... </div>

 

Style #7

<div style="background-color: #f6f6f6; border: 3px #009ee0 dotted; padding: 17px; text-align: left;"> Script here... </div>

 

Style #8

<div style="background-color: lightcyan; border: 2px #1b1a76 dotted; padding: 10px; text-align: left;"> Script here...</div>

 

Style #9 ( Sroll )

<div style="background-color: antiquewhite; border: 2px solid blue; height: 100px; overflow-y: scroll; padding: 5px; width: auto;"> Script here... </div>

 

Style #10

<div style="background-color: antiquewhite; border: 2px solid brown ; height: 100px; overflow-x: scroll; overflow-y: scroll; width: auto;"> <div style="width: 2500%;"> Script here...</div>

 

Style #11

<div style="border: 2px solid black; height: 100px; overflow-x: scroll; overflow-y: scroll; width: auto;"> <div style="width: 2500%;"> Script here... A B C D E </div> </div> A B C D E

 

Notes:

• Border : 6px = Script Box Border Thickness

• Text-align:left = Left-aligned text position

• Background-color: #00000 = Background color

• Width: 2500% = Width of the box

Style #12

<div> <form name="copy"> <div align="center"> <input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All" /></div> <div align="center"></div> <br /> <div align="center"> <textarea name="txt" readonly="true" style="font-size: small; padding: 17px; font-family: Fira Mono; height: 100px; width: responsive;"> Script here...

 

2. Dark Style 

Style #13

<div style="background-color: #2c323c; color: #fff; border-left: 5px solid #800000; padding: 17px; text-align: left;"> Script here... </div>

 

3. Style Soft

Style #14

<div style="background-color: #e6f7ff; border-radius: 10px; padding: 17px; text-align: left;"> Script here... </div>

 

4. Style Gradient

Style #15

<div style="background-image: linear-gradient(to right, #eeffe6, #fce6f8); border-radius: 10px; padding: 17px; text-align: left;"> Script here... </div>