How to create script box in blog post

How to create a script box in a blog post

Script Box is a box created by HTML code that helps to limit HTML, JAVA, CSS and any programming language script inside a box. Which makes your article look good and readers also understand what the article is and what the script code is.

The first image is with a script box and the second image is without a script box

You can see the image above in which the first article is without Script Box and the second is with Script Box. Now by looking at the image, you must have understood why an article without Script Box does not look good and why Script Box is important when you write an article related to a script code.

You will find many articles related to how to create a script box in a blog post. But most of them have to put separate code in blogger theme, which not all bloggers are able to do. That is why I am going to tell you the easy way, just follow it, then you will also be able to use Script Box easily.

Before knowing how to create Script Box in Blog Post, you should first see the preview of Script Box which I have given below.

Simple script box

<div style="background-color: #f3f3f3; border-left: 10px solid rgb(34, 136, 221); border-radius: 20px; padding: 10px; text-align: left;"> TechWebMate </div>

<div style="background-color: ghostwhite; border-left: 10px solid gray; border-radius: 30px; border-right: 10px solid gray; padding: 10px; text-align: center;"> TechWebMate </div>

<div style="background-color: ghostwhite; border-top: 8px solid red; overflow: auto; padding: 10px; t-align: left;"> TechWebMate </div>

Scroll script box

<div style="background-color: #f3f3f3; border-left: 10px solid rgb(34, 136, 221); border-radius: 20px; padding: 10px; text-align: left; height: 100px; width: auto; overflow: auto; "> TechWebMate </div>

<div style="background-color: ghostwhite; border-left: 10px solid gray; border-radius: 30px; border-right: 10px solid gray; padding: 10px; text-align: center; height: 100px; width: auto; overflow: auto; "> TechWebMate </div>

<div style="background-color: ghostwhite; border-top: 8px solid red; overflow: auto; padding: 10px; t-align: left; height: 100px; width: auto; overflow: auto; "> TechWebMate </div>

Note

text-align (script position)
border-color (border line color)
background-color (Script Box color)
border: (..) px (border line thickness)

Let me tell you that you can change the background color, border line color, border size and script position of all these Script Box as per your choice, which I have given information above. And how to add these script box in blog post, you will get simple steps below, just follow it.

3 Step to create script box in blog post

First click on Create new post. Then, click on Compose view and select HTML view.

Step One

First you go to your Blogger Blog and click on Create new post. Then, click on Compose view and select HTML view.

Then paste the script box code here. Click on HTML view and select Compose view.

Step Two

After that, copy and paste any Script Box code of your choice from here. Then click on HTML view and select Compose view.

Then you will see a box in which you paste your script and click on Preview post to see if it is correct or not.

Step Three

You will then see a box with TechWebMate written on it. Paste your script in this box and click on Preview post to see if this Script Box appears correctly.

Done

Just follow this simple step, you will also be able to easily and quickly create a Script Box in your blog post. Hope this little information has helped you. If you have any questions, comment below so that I can assist you.