create an alert box info box and the tips box

hey today im gonna share how to create an alert box, info box, and the tips box easily on your blog posting....

example

advantages :

• colorful
• responsive
• easy to use
• beautiful design
• and manymore

how to use??

1. Go to a blogger dashboard
2. template - html
3. just paste the code below in the before </style>

.info {
 background: #F3F781 url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkep0YJJu0RfFXQ0q0aq3jg_o_-Trdd56Wa5i-KvQ76IxlHFOxqHZaVGmQrkA54b5NQHKrDcvtvCYfW8w7n3AEHh2AB4XQik2oQ48ve9j_8kle6fGuiQv0vsyLSpu7cXeRzxPiuCLe0pI/s1600/info.png&#39;) no-repeat 12px 8px;
 color: #222
}
.tips {
 background: #7CADDE url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP_34EWFNCsMcSErmPj0SLWoV6CPRWW5PuBMEtfHMaDbpxEQ_jCc7Q79w2zrTj_R0352ov0LcaaqqarCTlPe3Z-vGeZWNTZXdrkHirXMdl2m8TpBYUKmUAoBKzY3DhETHOWxl0gLqCfis/s1600/tips.png&#39;) no-repeat 12px 8px;
 color: #fff;
}
.warning {
 background: #db6161 url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBZLi4l8efhWTryx4hADeDlWI75IgQgzpzYrRMvi6c1XQUjQwmBcDFi22Kd-rJjI5Id8RTtlppyylNBmp-E-clMmoTWyaPdsZPY67ycSRSBncBwx-GatYpy8A_4k4uSexPHIotcijQbGU/s1600/warning.png&#39;) no-repeat 12px 8px;
 color: #fff;
}

how to using info, warning, and tips in your postingwhen writing a post, paste the above code in the HTML (don't paste on the compose mode)!!
and change the text, with your own writing
info box code

&lt;div class=&#039;info&#039;&gt;
... change this whit your teks info ...&lt;/div&gt;

tips box code

&lt;div class=&#039;tips&#039;&gt;
... change this whit your tips teks...&lt;/div&gt;

warning box code

&lt;div class=&#039;warning&#039;&gt;
... change this whit your warning teks ...&lt;/div&gt;

maybe just that's all, What can i share about how to create peringantan box, info box, and the box of colorful tips, hopefully useful..