How To Create Material Design Color Boxes For Notes

0
How To Create make Material Design Color Boxes
How to create Material design color boxes-In this article we will explain you how to beautify your blog or website with beautiful material design color box for custom blogger templates.In previous article we already published How to Create Stylish CSS Note Box and CSS Notification Boxes using shortcode.Now days every blogger try to make their post more beautiful and unique and this is the best way to add colored design boxes between your post to highlight some important notice, quotes, headlines etc.

Why You should use Color box

One of the main reason is you must use color box in your long article is to make the reader does not get bored with writing from top to bottom without any note, quotes etc does not make look beautiful your article.So in order to keep engage your visitors with your content you must create unique design and must use material design color boxes in order to get readers attention. Interested to make it? please follow the tutorial below.

Installation Steps:

#1. Go to Blogger > Template > Edit Html
#2. Copy the below CSS and paste it just before the ]]></b:skin> or </style>
/* Material Design Color Boxes by bloggersstand.com*/
.bsdcolorboxes{overflow:hidden;position:relative;margin:.6rem 0 1rem;transition:box-shadow .26s;border-radius:3px;color:#fff;box-shadow:0 3px 6px 0 rgba(0,0,0,0.16),0 3px 10px 0 rgba(0,0,0,0.12);padding:21px;font-size:15px}
.bsdcolorboxes.blue{background:#449d48}
.bsdcolorboxes.green{background:#4CAF50}
.bsdcolorboxes.red{background:#f5554a}
.bsdcolorboxes.orange{background:#ffa219}
.bsdcolorboxes.purple{background:#7446c4}
#3. Now save your template.

Finally we are going to add the material design color boxes into the article.For that just change the mode compose to html and copy the any color code of your choice.

#1. Material Design Color Box Purple-
Material Design Color Box Purple for blogger template
<div class="bsdcolorboxes purple">
Material design color box purple.
</div>
#2. Material Design Color Box Red-
Material Design Color Box red for blogger template
 <div class="bsdcolorboxes red">
Material design color box red.
</div>
#3. Material Design Color Box Orange-
Material Design Color Box orange for blogger template
 <div class="bsdcolorboxes orange">
Material design color box orange.
</div>
#4. Material Design Color Box Blue-
Material Design Color Box blue for blogger template
<div class="bsdcolorboxes blue">
Material design color box blue.
</div>
#5. Material Design Color Box Green-
Material Design Color Box green for blogger template
<div class="bsdcolorboxes green">
Material design color box green.
</div>
Save and Publish. 
Color code boxes for blogger template.In this box you can display notice,notes,quotes and important lines highlight.Google material design color boxes for blogspot themes.
How to create Material design color boxes -In this article we will explain you how to beautify y...
SUMMARY

Color code boxes for blogger template.In this box you can display notice,notes,quotes and important lines highlight.Google material design color boxes for blogspot themes.

You Might Also Like:

We hope this article helped you to learn How To Create Material Design Color Boxes For Notes. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Next
This is the most recent post.
Previous
Older Post

Post a Comment Blogger Disqus

0 Comments on "How To Create Material Design Color Boxes For Notes" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand