Tutorial Make Color Box Material Design in Blogger - Many people trying to make their blogs so interesting and trying make their visitors feel comfort when reading articles in their blogs. One of effort they usually do is making their design blog more beautiful from design side to article's structure.
Now I am giving tutorial make an article in blog more colorful, with 5 selection colors to make quote, note and info in your blog article.
Why should use the Color Box?
One of reasons why blog with long article must use color box is to making the visitors not boring with article from above to below without useful note or info summary. with color box in article will make visitors not boring when reading it.
Interested to make it? Follow this tutorial below...
Open Blogger > Template > Edit HTML
Put CSS below right above 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 put HTML Color Box Go to Post editor then choose mode HTML and put one of color codes you want to choose.
Deadtheme.com.
<div class="colorbox purple">Deadtheme.com. </div>
a place about reshare free templates.
<div class="colorbox blue">a place about reshare free templates. </div>
a place about reshare free and tutorials.
<div class="colorbox green">a place about reshare free and tutorials. </div>
build awesome website or blog.
<div class="colorbox red">build awesome website or blog. </div>
Thank you.
<div class="colorbox orange">Thank you. </div>
Save.
Tutorial Make Color Box Material Design in Blogger
4/
5
Oleh
Saint Adjie
