Birthday

July 14, 2012 is TipRicks's Birthday, Please Prepare and Send Good Wishes to its team!

UnderStood
TipRicks is under maintenance! If you found any error please let us know. Contact Us ×

Hello!

Click one of our representatives below to chat on WhatsApp

Support Customer Service Center
+923084774257
You can also send us an email to support@tipricks.com
Hello! What can I do for you?
×
How can I help you?

How to Add/Make Material Design Color Box in Blogger

SHARE:

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.

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




Was this article helpful?

Thanks! Your feedback will help us to improve our Services.

COMMENTS

BLOGGER: 2
  1. 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.

    ReplyDelete
    Replies
    1. Thanks😍 Pijush for your comment. I'll provide coding for code box soon. Stay connected 🙂

      Delete

Need help? Contact to our support center at +92 308 477 4257
Name

Agriculture PPT Templates,2,AI Tools,1,Amazon,1,AskTipRicks,9,Blogger,48,Blogger-SEO,6,Blogger-Templates,1,Blogger-Tutorials,32,Blogger-Widgets,11,Blogging-Tips,7,Books,1,Business,1,Computer PPT Templates,1,Computer-Tutorials,1,Creative-PowerPoint-Templates,2,Digital Marketing,1,Domain,1,Ecommerce,1,Facebook,4,Free-Mobile-Data,1,Freenom,1,General,7,Google-Adsense,4,Google-Analytics,2,Google-Classroom,3,Instagram,2,Internet,1,Interviews,1,Islamic PPT Templates,1,jQuery,1,Marketing,1,Medical PPT Templates,1,Microsoft-Word,3,Mobile-Marketing,1,Motivation,1,MS Word,1,News,25,News-Updates,26,Oppo-Mobile-Features,1,PDF,1,PowerPoint-Templates,7,Resume-Templates,2,Reviews,3,SEO,8,Social-Media,6,Tech-News,15,TrueCaller,1,Twitter,1,Videos,24,Vlogging,1,Web-Hosting,1,Whatsapp,3,WordPress,8,WordPress-SEO,1,WordPress-Themes,1,WordPress-Tutorials,4,Youtube,5,
ltr
item
TipRicks Blog: How to Add/Make Material Design Color Box in Blogger
How to Add/Make Material Design Color Box in Blogger
How to make material design color boxes in blogger posts with simple CSS code.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZNlm_0IJZy0EU0rbsCs7GBpbjYdT8JS-Ym54xz0r-lIU2j7R5c9QHUILHYKoL4vqEbmSkB0KZm60_gbDfnPShMri7k-dUxM964EatWiKZcVPiDXmrjyY88iAJFAwkfDYHTN8oINrywS0q/s320/how-to-add-make-material-design-color-box-in-blogger.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZNlm_0IJZy0EU0rbsCs7GBpbjYdT8JS-Ym54xz0r-lIU2j7R5c9QHUILHYKoL4vqEbmSkB0KZm60_gbDfnPShMri7k-dUxM964EatWiKZcVPiDXmrjyY88iAJFAwkfDYHTN8oINrywS0q/s72-c/how-to-add-make-material-design-color-box-in-blogger.png
TipRicks Blog
https://blog.tipricks.com/2016/09/how-to-add-make-material-design-color-box-in-blogger.html
https://blog.tipricks.com/
https://blog.tipricks.com/
https://blog.tipricks.com/2016/09/how-to-add-make-material-design-color-box-in-blogger.html
true
7070217950916442682
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy