How to make material design color boxes in blogger posts with simple CSS code.
Well this time I will give a tutorial that will make your articles on your blog becomes more colorful, with 5 color choices that will create quotes, notes and information on the article of your blog become more colorful.
Why should use Color Box?
One of the reasons why blogs with a long article must use a color box is to make the reader does not get bored with writing from top to bottom without any notes or summaries of useful information. With the Color Box in the article will make visitors feel bored while reading.
Interested to make it? Please follow the tutorial below
1. Go to Blogger > Template > Edit HTML Put CSS below are just above the code or
]]></b:skin></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}]
2. Save Template.
Furthermore, to put HTML Color Box entry into the post editor and select the HTML mode and enter one of the codes colors buddy box select.
Failure is not the end , but the beginning for us who want to think.
[<div class="colorbox purple">
Failure is not the end , but the beginning for us who want to think.
</div>]
To achieve a goal , sometimes we have to take a detour . Failure is one of them.
[<div class="colorbox blue">
To achieve a goal , sometimes we have to take a detour . Failure is one of them.
</div>]
One person who tried and failed , is better than a thousand people who had never tried.
[<div class="colorbox green">
One person who tried and failed , is better than a thousand people who had never tried.
</div>]
Do not always go with the flow , be yourself.
[<div class="colorbox red">
Do not always go with the flow , be yourself.
</div>]
Failure is part of the effort , not the result that makes us give up so easily.
[<div class="colorbox orange">
Failure is part of the effort , not the result that makes us give up so easily.
</div>]
Hope you like the tutorial. You can see more widgets for your blogger blog here.
This article "How to Add/Make Material Design Color Box in Blogger" is protected by
Yes it is working. Thanks for your article and effort. My request is, please provide code box codding as you provide code box in this article.
ReplyDeleteThanks😍 Pijush for your comment. I'll provide coding for code box soon. Stay connected 🙂
Delete