Membuat kotak peringatan catatan pada blog

Pada Tutorial ini saya akan membahas tentang Cara Menambahkan Kotak Info, Tips, dan Peringatan hal semacam ini memang sudah tidak asing lagi karena sudah banyak yang dibahas pada blog lain
karena suatu catatan di anggap penting untuk ditampilkan maka di buat berbeda dengan tulisan biasanya untuk memberi tahu pengunjung info penting catatan yang perlu diperhatikan, agar terlihat lebih sangat Urgent:

Berikut, panduan dari tutorial singkat ini.

1. silahkan buka Blogger > Template > Edit HTML > Kemudian cari kode ]]></b:skin> atau </style>
2. selanjutnya copykan kode CSS dibawah ini tepat diatasnya.

.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: #0000A0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5zGZzNFYTQMTJb1buKcTq613fFEFGzbeRyeSt87erzBYuBcAv-ffWxJ0du52cCAD2qzv39l9c_iFyty5QAv0EmP0Rcih8KQxamZyF4PtQRJB8HTX5JkoDBOsbnIUXRnpyZn87Oq2AMH0/s1600/info.png) no-repeat 12px 8px;
color: #fff
}
.tips {
background: #FDD017 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6TzEozryXjsKMjkP8a_rGsHuoAwylOpwJJJnCzTTjt2fWJR_CiNm5G1aSlnj38RJb9qI_5qfb8_SgDK2Xy-qtPaIJcLip6pF9zRWozt2xgq8iSpX9VWY29HtuQRUcVKQBrBQTxaay39g/s1600/tips.png) no-repeat 12px 8px;
color: #fff;
}
.warning {
 background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBEh5uOhCUND0FWC2sSYnxoZO_wMDWR0XjuUNJZ5mj6bOM-f14abn21OjAAT0FGLtC2CgUlYjzBzEX1e8txQ7JCuKKzn20-NLgSZXU6ILQh7hkr96H4WBeL2Kc8jPnBT3peOrLzNGj7I0/s1600/warning.png') no-repeat 12px 8px;
 color: #fff;
} 

3. setelah di copy klik tombol Save/Simpan
4. untuk menggunakan kotak peringatan Copykan kode HTML dibawah ini pada setiap postingan kalian untuk memunculkan peringatannya

☑ Informasi

Isi catatan info misalnya:
Untuk menggunakan flashdisk agar tidak terkena virus

<div class="info">
<span style="font-size: large;">Isi catatan info misalnya: </span><br />
Untuk menggunakan flashdisk agar tidak terkena virus 
</div> 

☑ Tips

Isi tips misalnya:
Sebelum menggunakan perangkat listrik, periksalah kondisi sekitar.

<div class="tips">
<span style="font-size: large;">Isi tips misalnya: </span><br />
Sebelum menggunakan perangkat listrik, periksalah kondisi sekitar
</div> 

☑ Peringatan

Isi Peringatan misalnya:
Dilarang membajak Hak Cipta

<div class="warning">
<span style="font-size: large;">Isi Peringatan misalnya:  </span><br />
Dilarang membajak Hak Cipta
</div> 

Anda juga bisa mengubah warna tema background atau text dengan menggunakan kode warna seperti pada link HTML Color Code & Name