cara membuat kotak peringatan catatan penting diblog

Tutorial kali ini tentang cara membuat Kotak Info, Tips, dan Peringatan memang sudah tidak asing lagi karena sudah banyak yang bahas blog lain, tapi mungkin saja ada beberapa blogger yang belum tau bagaimana cara membuat Tips, Info dan Peringatan ini diblognya

biasanya karena penting suatu catatan untuk ditampilkan dibuat berbeda dengan tulisan biasanya untuk memberi tahu pengunjung info penting catatan yang perlu diperhatikan, agar terlihat lebih profesional aja postingannnya :wow:

cara membuat kotak info,tips, dan peringatan

1. harus mempunyai blog dan login di blogger.com terlebih dahulu ya :mrgreen:
2. Silahkan kalian letakan CSS dibawah ini diatas ]]></b:skin> atau </style>

.info, .tips, .warning {
font-family: 'Open Sans', "Segoe UI" ,Arial,Tahoma, sans-serif;
font-weight:400;
font-size:13px;
line-height: 22px;
min-height: 38px;
padding: 10px 12px 12px 68px;
margin: 5px 0;
}
.info, .tips, .download {
color: #fff
}
.info li {
list-style: none;
width: 80px;
margin: 3 0 0 7px;
}
.info {
background: #91C9E8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNqjudqYPmqUdQBGKUtbdVOywfP2HqVaWhJS4hXwhvQoj5mdZabpJq4s1p4g4xxHWZtlTh_DoUuUUsd1Ito9Um69tbMwvrpcSYhv9TfY7HFHwAqLAJOagUr_qRvvGmnih3gVOmuL3K3a8/s1600/info.png) no-repeat 12px 8px;
color: #fff
}
.tips {
background: #7CADDE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJg6dljCsJP394RSEQvayqf4cZWevHn8lEpTllXYIVDACm9Pjg1_ZraV0K0GjAdDx41kgzXXuxk2IQgKTSu0DhsgoSD6kQz-lX4vJN_4cgf52uEYyMWSnpiFnJW72kliTUpJMxxIsRKxI/s1600/tips.png) no-repeat 12px 8px;
color: #fff;
}
.warning {
 background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhddGasyepgLBlzhi8vIM_uOrF2RNzC6oXvvrPwSfu6TTzA_Wp0BxjUnrmNlKjtxF-ChE3WAA9rKQaeWHIy0_hTyChKW7cZEwM0pHdXKxqDwU_7sik6PnsYClRztciGX7knrrnO6I7RQFA/s1600/warning.png') no-repeat 12px 8px;
 color: #fff;
}

3. Save tempe kalian Ehh.. Template :lol:

Lalu masukan/Copykan kode dibawah ini pada setiap postingan kalian untuk memunculkan peringatannya

---

<div class="info">
Isi catatan info misalnya: lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue</div>

<div class="tips">
Isi tips misalnya: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.</div>

<div class="warning">
Dilarang komentar SPAM, SARA dan Pornografi, silahkan berkomentar dengan baik dan sopan</div>

Ok sekian dulu untuk Tutorial cara membuat peringatan penting diblog semoga bermanfaat :-d