Sunday, May 17, 2020
Creating and installing boxes for script code in articles / blog posts is one way to make the appearance of script code in articles look neat and more pleasing to the eye.
Moreover, the installed script box has a very unique shape and has a very attractive color so that readers or blog visitors will be comfortable when they have to see a collection of script code whether it's HTML or javascript that sometimes makes our eyes become sick because of its complexity.
To make the actual script code is very easy and simple. Actually there are many blogs that discuss about how to create a script box in an article or post, but most of them provide a way that requires us to be very clever in fiddling with CSS code in the theme of the blog and not all bloggers can do it, especially for friend bloggers who are still fairly new and still learning.
Don't worry, because I will give you some unique and simple script box views without having to work with CSS tweaking on the theme of the blog and how to put it in your blog posts.
1. Simple Minimalist Style
Paste the script code here
<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">Paste the script code here</div>2. Border Style on the Left
Paste the script code here
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #FEBF80; border-left: 5px solid #FF3300; border-radius: 10px; padding: 10px; t-align: left;">Paste the script code here</div>3. Blue Double Border Style
Paste the script code here
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;">Paste the script code here</div>4. Egg Yolk Style
Paste the script code here
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed
#aaa; padding: 10px; t-align: left;">Paste the script code here</div>5. Blue without borders
Paste the script code here
<div style="border: 0; padding: 10px; background-color: #82CAFA; text-align: left;">Paste the script code here</div>6. Blue Line White Style
Paste the script code here
<div class="script" style="background-color: white; border: 3px #1780dd Double; padding: 10px; text-align: left;">Paste the script code here</div>7. White Black Stripe
<div style="border: 1px solid black; font-size: 18px; font-weight: bold; margin: 0.5rem 0 1rem; overflow: hidden; padding: 20px; position: relative; text-align: center; transition: 0.25s;">Paste the script code here</div>8. Border-top script box
Paste the script code here
<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;">
Paste the script code here</div>9. Box with 10px padding-outset / t-align border
Paste the script code here
<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;">
Paste the script code here </div>10. Box with a 20px radius limit, 10px left-right border, back ground
Paste the script code here
<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;">
Paste the script code here</div>11. Text-center / text box in the middle of the shadow
<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: 18px; font-weight: bold; margin: 0.5rem 0 1rem; overflow: hidden; padding: 20px; position: relative; text-align: center; transition: 0.25s;">Paste the script code here</div>12. Text Left , Light Grey none decoration
Paste the script code here
<div style="background-color: #f3f3f3; padding: 10px; text-align: left;">
Paste the script code here</div>13. White black stripe
<div style="border: 1px solid black; font-size: 18px; font-weight: bold; margin: 0.5rem 0 1rem; overflow: hidden; padding: 20px; position: relative; text-align: center; transition: 0.25s;">Paste the script code here</div>14. Dotted Script Box
Paste the script code here
<div style="background-color: white; border: 3px #1780dd dotted; padding: 10px; text-align: left;">
Paste the script code here</div>15. Dashed Script Box
Paste the script code here
<div style="background-color: white; border: 3px #1780dd dashed; padding: 10px; text-align: left;">
Paste the script code here</div>How to Install in Posts
1. Create a new post / entry
2. Then switch from Compose mode to HTML
3. Paste in one of the script box codes that you selected above
4. To see the results go back to mode Compose