Cómo crear cuadros de color estilo material design para notas

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: #03A9F4
}

.bsdcolorboxes.green {
 background: #56c45b
}

.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.

<div class="bsdcolorboxes purple">Material design color box purple. </div>

#2. Material Design Color Box Red

Material design color box red.

<div class="bsdcolorboxes red">Material design color box red.      </div>

#3. Material Design Color Box Orange

Material design color box orange.

<div class="bsdcolorboxes orange">Material design color box orange.      </div>

#4. Material Design Color Box Blue

Material design color box blue.

<div class="bsdcolorboxes blue">Material design color box blue.      </div>

#5. Material Design Color Box Green

Material design color box green.

<div class="bsdcolorboxes green">      Material design color box green.      </div>