How to Make Color Box Design Materials - Many people try to make their blog interesting and try to make visitors feel comfortable while reading the article on the blog, one of the usual business is to beautify the look of the blog in terms of design and article structure written.
Well, this time I will give a tutorial that will make the article on my blog become more colorful, with 5 color choices that will make quotes, notes, and info on your blog article become more colorful.
WHY USE COLOR BOX?
One of the reasons why blogs with long articles should use a color box is to make the reader not bored with writing from top to bottom without any notes or useful summary info. With the Color Box on the article will make visitors feel not bored while reading.INSTRUCTION TO INSTALL
Go to Blogger > Template > Edit HTML
Put the CSS below just above the code ]]></b:skin>or</style>
/* Material Color Box */
.colorbox{overflow:hidden;position:relative;margin:.5rem 0 1rem;transition:box-shadow .25s;border-radius:2px;color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);padding:20px;font-size:14px}
.colorbox.blue{background:#03a9f4}
.colorbox.green{background:#4CAF50}
.colorbox.red{background:#F44336}
.colorbox.orange{background:#ff9800}
.colorbox.purple{background:#673ab7}
Save Template.
Next to put the HTML Color Box into the post editor and select the HTML mode and input one of the color code box that you select.
Purple Color Box Code Below
<div class="colorbox purple">
Kegagalan bukanlah akhir, tapi awal bagi kita yang mau berpikir.
</div>
Blue Color Box Code Below
<div class="colorbox blue">
Untuk mencapai suatu tujuan, kadang kita harus menempuh jalan memutar. Kegagalan adalah salah satu di antaranya.
</div>
Green Color Box Code Below
<div class="colorbox green">
Satu orang yang mencoba lalu gagal, lebih baik daripada seribu orang yang tak pernah mencoba.
</div>
Red Color Box Code Below
<div class="colorbox red">
Jangan selalu mengikuti arus, jadilah diri sendiri.
</div>
Orange Color Box Code Below
<div class="colorbox orange">
Kegagalan adalah bagian dari usaha, bukan hasil yang membuat kita menyerah begitu saja.
</div>
Now Save the template and done.
If you have any problem related to this please comment below we will work on it for you.
COMMENTS