How to Make a Script Box and Scroll Box for Your Website Content (WordPress/Blogger) with HTML Codes

Discussing about basic HTML script codes such as making script boxes and scroll boxes with various forms is indeed very fun and very important for you as a web developer, so that your articles look attractive according to the needs of readers or clients.

Purpose of Script Box

Actually, the use of this script box is rarely used for articles that are based on news, cooking tips, education, sports, etc.. but for niche that discuss HTML code, CSS code and Technology tutorials, it is very suitable so that the delivery of script content is not mixed with text while adding a professional impression and not messy.

The method is easy, anyone can do it, especially friends, who first understand this field.

Below I will summarize all the various codes to make color boxes that can help and support articles so that they look neater, better, and very suitable for use on your blog/website.

WANNA TRY..?

For all blogger who want to get it, or need it, here is a collection of script boxes that I have successfully summarized, simply, you just have to choose and can be installed in your post.

For Information:

To change the background or border color, you can find your favorite colors in this article: Complete HTML Color Codes for Website with Examples.

The Best Collection of Script Boxes and Scroll Bar Boxes

Script Boxes:

(just copy the inside of the box)

1. Text box-center/text in the middle of the shadow/hidden

<div style=”background-color: deepskyblue; border-radius: 7px; box-shadow: 10px 10px 0 rgba(0 , 0 , 0 , 0.16) , 0 2px 10px 0 rgba(0 , 0 , 0 , 0.12); color: black; font-size: 15px; font-weight: bold; margin: 0.5rem 0 1rem; overflow: hidden; padding: 20px; position: relative; text-align: center; transition: 0.25s;”>YOUR TEXT HERE</div>

2. Text center hidden – low shadow

<div style=”background-color: deepskyblue; border-radius: 5px; box-shadow: 5px 5px 0 rgba(0 , 0 , 0 , 0.16) , 0 2px 5px 0 rgba(0 , 0 , 0 , 0.12); color: black; font-size: 15px; font-weight: bold; margin: 0.5rem 0 1rem; overflow: hidden; padding: 20px; position: relative; text-align: center; transition: 0.25s;”>
YOUR TEXT HERE</div>

Text center hidden low shadow. Description from top to bottom:

    • Yellow – shadow box
    • Violet – radius/curve >> adjustable
    • Blue – background >> adjustable
    • Red – border >> adjustable (color and size)
    • Green – height (specifically for scroll system)

3. Solid box-left/t-align left)

<div style=”-moz-border-box: 10px; -webkit-border-box: 10px; background-color: ghostwhite; border-left: 5px solid red; padding: 20px; t-align: left;”>
<span style=”color: black;”><span style=”font-family: &quot;trebuchet ms&quot; , sans-serif;”>YOUR TEXT HERE</span>

4. Green script box (t-align -left)

<div style=”-moz-border-box: 10px; -webkit-border-box: 10px; background-color: #6ddb98; border-left: 7px solid green;  padding: 20px; t-align: left;”>
<span style=”color: black;”><span style=”font-family: ‘Trebuchet MS’, sans-serif;”>YOUR TEXT HERE </span></div>

5. Simple with ghostwhite

<div style=”-moz-border-box: 10px; -webkit-border-box: 10px; background-color: ghostwhite; border-left: 7px solid rosybrown; padding: 20px; t-align: left;”>
<span style=”color: black;”><span style=”font-family: &quot;trebuchet ms&quot; , sans-serif;”>YOUR TEXT HERE</span>

6. Script box without border-left (color can be customized)

<div style=”-moz-border-box: 10px; -webkit-border-box: 10px; background-color: turquoise; border-left: 10px solid #4fee0f; border: 10px; padding: 10px; t-align: left;”>YOUR TEXT HERE</div>

7. Script box with corner radius=10px+border-left=10px

<div style=”-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 10px solid #2288dd; border radius: 10px; padding: 10px; t-align: left;”>YOUR TEXT HERE</div>

8. Double-border box >> vertical/height, adjust

<div style=”background-color: azure; border: 3px #1780dd double; padding: 10px; text-align: left;”> YOUR TEXT HERE<br /></div>

9. Box with single padding border-black

<div style=”background-color: ivory; border: 2px solid #444; padding: 10px; text-align: left;”>
YOUR TEXT HERE</div>

10. Box with 4px border radius >> size and color can be adjusted

<div style=”-moz-border-radius: 8px; -webkit-border-radius: 8px; background-color: aliceblue; border-radius: 8px; border: 4px solid #999; padding: 10px; t-align: left;”>
YOUR TEXT HERE</div>

11. Border-dotted box 2px and color can be customized

<div style=”background-color: lightcyan; border: 2px #1b1a76 dotted; padding: 10px; text-align: left;”>
YOUR TEXT HERE</div>

12. Box with border-dashed>>2px

<div style=”background-color: mistyrose; border: 2px #610b38 dashed; padding: 10px;”>
YOUR TEXT HERE</div>

13. Box radius 10px webkit-double-border 4px

<div style=”-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: lightskyblue; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;”>
YOUR TEXT HERE</div>

14. Box with border padding-outside/t-align 10px

<div style=”-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: darkturquoise; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left;”>
YOUR TEXT HERE&nbsp;</div>

15. Box with border radius 20px, -border left-right 10px, background

<div style=”-moz-border-radius: 20px; -webkit-border-radius: 20px; background-color: ghostwhite; border-left: 10px solid gray; border-radius: 20px; border-right: 10px solid gray; padding: 20px;”>
YOUR TEXT HERE</div>

16. Dashed coral box – radius 10px – background – border 4px

<div style=”-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: lightsteelblue; border-radius: 10px; border: 4px dashed coral; padding: 6px; t-align: left;”>
YOUR TEXT HERE</div>

17. Box with double;padding 3px all can be adjusted in size and color

<div style=”background-color: #ffebcd; border: 3px #5f200e double; padding: 10px; text-align: left;”>
YOUR TEX HERE</div>

18. Border-top script box

<div style=”-moz-border-box: 10px; -moz-border-box: 10px; -webkit-border-box: 10px; background-color: ghostwhite; border-top: 8px solid red; overflow: auto; padding: 10px; t-align: left; t-color: #CCFFFF;”>YOUR TEXT HERE</div>

19. Script box radius 40px outside-inside 60px

<div br=”” gt=”” style=”background-color: chocolate; border-radius: 10px; border-radius: 40px; border-radius: 60px; border: 4px double #fff9j99; padding: 10px; t-align: center; t-color: #CCFFFF;”>
YOUR TEXT HERE</div>

20. Double-double box

<div br=”” gt=”” style=”background-color: chocolate; border-radius: 10px; border-radius: 40px; border-radius: 70px; border: 4px double #fff999; padding: 10px; t-align: center; t-color: #CCFFFF;”>
<div br=”” gt=”” style=”border-radius: 60px; border: 4px double rgb(255, 249, 153); padding: 10px;”>YOUR TEXT HERE</div>

Script Boxes with the Vertical Scroll and Vertical + Horizontal Scroll:

(just copy the inside of the box)

Simple vertical scroll box adjusts, plain/white background 200px height can be edited

<div style=”background-color: white; border: 2px solid gray; height: 100px; overflow: auto; padding: 5px; width: auto;”>
YOUR TEXT HERE
A
B
C
</div>

→ caption: height 100px
→ width adjusts

<div style=”background-color: antiquewhite; border: 2px solid blue; height: 100px; overflow: auto; padding: 5px; width: auto;”>
YOUR TEXT HERE
“A
B
C”
</div>

Next, the scroll box goes up and down and sideways (Vertical + Horizontal):

1. Plain Vertical + Horizontal scroll box

<div style=”border: 2px solid black; height: 100px; overflow-x: scroll; overflow-y: scroll; width: auto;”>
<div style=”width: 2500%;”>
YOUR TEXT HERE</div>
</div>

2. Scroll box-Vertical+Horizontal background

<div style=”background-color: antiquewhite; border: 2px solid brown ; height: 100px; overflow-x: scroll; overflow-y: scroll; width: auto;”>
<div style=”width: 2500%;”>
YOUR TEXT HERE</div>

Related Posts