Pada kesempatan kali ini saya akan membagikan tips bagaimana Cara Mudah Membuat Catatan Note Box Berwarna Dengan Icon Quotes Pada Postingan Blogger. Penggunaan catatan note box berwarna dengan Icon Quotes pada blogger ini menurut saya sangat bermanfaat, yaitu agar pembaca dapat mengetahui poin-poin penting yang tidak boleh dilewatkan untuk dibaca terdapat isi artikel yang kita buat.
Pada postingan sebelumnya sebenarnya saya pernah memposting bagaimana Cara Mudah Membuat Catatan Note Box Berwarna Pada Blogger namun tanpa memiliki Icon Quotes. Namun pada tutorial kali ini catatan note box tersebut diberi Icon Quotes agar terlihat lebih cantik dan tidak terlihat kaku.
Jadi balik lagi ke pembahasan kita di awal saya akan memberikan tips bagaimana Cara Mudah Membuat Catatan Note Box Berwarna Dengan Icon Quotes Pada Postingan Blogger. Kotak catatan ini saya buat dengan 3 pilihan warna dan Icon Quotes yang dapat kalian pilih sesuai dengan keinginan kalian, atau bahkan bisa mengubahnya keinginan kalian sendiri. Berikut adalah ulasannya.
1. Masuk Blogger > pilih menu Tema > pilih Edit HTML
2. Letakkan kode CSS ini tepat berada di atas kode ]]></b:skin> atau </style>
.info, .catatan, .peringatan {line-height: 22px;min-height: 38px;padding-left: 10px;padding: 10px 12px 12px 68px; margin: 5px 0;
}
.info {
background: #cbd1d9 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidb9RdNNC7aVoQawfvZgAcjgAlAyY4rHnnc69L755yLD8kzSWoPvMgeqq_OHp5UCSXTaNXJQsGwjaQqR1NCVwX6f74-m6f9kLpzZWw4Zyy1i4s_McsB5rL-pFRmcfJ9bN0O9dZ5Ju15QDw/s1600/info.png') no-repeat 12px 8px;
color: #222
}
.catatan {
background: #c5ce59 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFgfV3XJEUMxqiSNQGpyWodnRRRS_0PbAQ1yNgGJ7mD_3Lwpq15fAUKED-1J_wrLav0M4fmSmUKri2WUhxYW19rXZwoFSxU_a3BM7nrt0fFve-I2uDHjLTxMJRhSrKmWipFp3FKlmo1OM/s1600/catatan.png') no-repeat 12px 8px;
color: #fff;
}
.peringatan {
background: #df8787 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqwS5Fxx2tjGhYzfZCR-47ADcql8kWvRM6-bQ-sp-WNITw4MovyDlFXHVCe69e9YPLFT9EcInNCCymtBro3BZRD0gOiLYLoqgv6REkRCQcQdR7zab8h-aMpVntzDRCcdhKNevO9vYSi5bR/s1600/Warning.png') no-repeat 12px 8px;
color: #fff;
}3. Jika sudah kemudian pilih Simpan Tema
4. Untuk menerapkannya di blog anda > buat Postingan Baru > pilih menu HTML > kemudian letakkan kode ini di dalamnya:
Untuk tampilan quote info, gunakan kode ini:
<div class='info'>
Cara Mudah Membuat Catatan Note Box Berwarna Dengan Icon Quotes
</div>Untuk tampilan klip catatan, gunakan kode ini:
<div class='catatan'>
Cara Mudah Membuat Catatan Note Box Berwarna Dengan Icon Quotes
</div>Untuk tampilan quote peringatan, gunakan kode ini:
<div class='peringatan'>
Cara Mudah Membuat Catatan Note Box Berwarna Dengan Icon Quotes
</div>Catatan : ubah warna merah tersebut dengan teks yang anda inginkan.
Demikian penjelasan dari saya bagaimana Cara Mudah Membuat Catatan Note Box Berwarna Dengan Icon Quotes Pada Postingan Blogger. Jika ada hal yang kurang dipahami silahkan tinggal kan pesan anda di kolom komentar, semoga informasinya bermanfaat dan sampai jumpa di postingan berikutnya.