How to Make a Block Notes, Tips and Warnings in Blog

How to make a block notes, tips and warnings in the Blog are typically used by blogs critical. Even so I still will share how despite not really matter.
Actually, for my friend who have advanced CSS and HTML will not be strange with this tutorial as even people who have advanced CSS and HTML might make more cool than I have shared this.

Login ke Blogger
Dashboard » Template » Edit HTML
Put the following code just above the code: ]]></b:skin> or </style>

.info, .tips, .warning {
line-height: 22px;
min-height: 38px;
padding: 10px 12px 12px 68px;
margin: 5px 0;
}
.info {
background: #e0e5eb url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdVPePc7zJ6qw2Uk-yV7XURU2E18JO7pXtIgdhFXaxTVQ0ixxHrYHdR2PbYdhBodsQ8zcYZXDJ6e3XCNw4VSza5dLBgUjGvQHMyyu0EZ3hs-kL4KBN4T_jPDtdjKGpX-8-aJRKGcGCjjBJ/s1600/info.png') no-repeat 12px 8px;
color: #222
}
.tips {
background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmlE6t95xPwPhHovbZP08AvtppCBpiRIbnTpy347KXtafJdZtCxsFM_mi_lhTuCnWdY72pETjYT_FmOUiAXlUfkHFUXBi_yt7Q5Do8ZdVXwyN6iJsK7to1ecuIYGZm_YnyJRhhN2ieF4EM/s1600/tips.png') no-repeat 12px 8px;
color: #fff;
}
.warning {
background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEneNNdQ53qPOiI25_hTab3qzkG3nMfOYtPiku3laIW-YpDcxDqUZSK9DeUyq_eGwUmzW1uVs5QuBb9_HYiZtyWbJeUhyphenhyphenuIeGisLA1SgQhqqw5qM_KvjJYWE-mX9nrTUh-CcvZ1itP9yol/s1600/warning.png') no-repeat 12px 8px;
color: #fff;
}