Pada kesempatan kali ini saya akan membagikan tips bagaimana Cara Mudah Membuat Catatan Note Box Berwarna Dengan Icon Font Awesome Pada Postingan Blogger. Penggunaan catatan note box berwarna dengan icon font awesome 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 font awesome. Namun pada tutorial kali ini catatan note box tersebut diberi icon font awesome 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 Font Awesome Pada Postingan Blogger. Kotak catatan ini saya buat dengan 7 pilihan warna dan icon yang dapat kalian pilih sesuai dengan keinginan kalian, atau bahkan bisa mengubahnya keinginan kalian sendiri. Berikut adalah ulasannya.
Cara Mudah Membuat Catatan Note Box Berwarna Dengan Icon Font Awesome Pada Postingan Blogger
1. Buka Blogger > pilih Menu Tema > kemudian pilih menu Edit HTML
2. Letakkan kode ini tepat berada diatas kode ]]></b:skin> atau </style>
/* Note Box Icon */
.notes{position:relative;border-radius:4px;display:block;font-size:14px;margin:16px 0;padding:12px 24px 12px 60px} .notes:before{float:left;font-size:30px; font-family:FontAwesome;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;word-wrap:normal;margin-left:-46px;margin-top:3px}
.notes1:before{color:#21a796;content:'\f087';} .notes1{background:#cfffe6;color:#565656}
.notes2:before{color:#f95060;content:'\f088';} .notes2{background:#f9bfc5;color:#565656}
.notes3:before{color:#2387c1;content:'\f06a';} .notes3{background:#c8d9e2;color:#565656}
.notes4:before{color:#1aa687;content:'\f00c';} .notes4{background:#6dedd0;color:#565656}
.notes5:before{color:#f63a50;content:'\f00d';} .notes5{background:#fb818f;color:#fff}
.notes6:before{color:#f7871a;content:'\f10d';} .notes6{background:#f5b474;color:#fff}
.notes7:before{color:#969696;content:'\f0c1';} .notes7{background:#f5f68e;color:#565656}
/* Animasi Note Box*/
.notes1:hover:before,.notes2:hover:before,.notes3:hover:before,.notes4:hover:before,.notes5:hover:before,.notes6:hover:before,.notes7:hover:before,.notes8:hover:before,.notes9:hover:before,.notes10:hover:before{-webkit-animation:ripple 0.65s linear;-moz-animation:ripple 0.65s linear;-ms-animation:ripple 0.65s linear;-o-animation:ripple 0.65s linear;animation:ripple 0.65s linear}@keyframes ripple{100%{opacity:0;transform:scale(2.5)}}3. Untuk menerapkan di blog buat postingan baru kemudian letakkan kode ini menu HTML (bukan
Versi 1
<div class="notes notes1">KALIMAT ANDA DISINI</div>Versi 2
<div class="notes notes2">KALIMAT ANDA DISINI</div>Versi 3
<div class="notes notes3">KALIMAT ANDA DISINI</div>Versi 4
<div class="notes notes4">KALIMAT ANDA DISINI</div>Versi 5
<div class="notes notes5">KALIMAT ANDA DISINI</div>Versi 6
<div class="notes notes6">KALIMAT ANDA DISINI</div>Versi 7
<div class="notes notes7">KALIMAT ANDA DISINI</div>Demikian penjelasan dari saya bagaimana Cara Mudah Membuat Catatan Note Box Berwarna Dengan Icon Font Awesome 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.