How to Add/Make Material Design Color Box in Blogger

How to make material design color boxes in blogger posts with simple CSS code.

How to Make Material Design Color Box - Many people are trying to make the blog interesting and try to make visitors feel comfortable while reading an article on the blog, one of the common effort is to beautify the look of their blog in terms of design and structure of the article is written.

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.

[##eye## You can the Demo below]

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