Skip to main content

Cara Membuat Kotak Catatan Keren di Blogger

Cara Membuat Kotak Catatan Keren di Blogger - Kali ini saya akan membagikan cara membuat kotak catatan (note box) keren di postingan blogger dengan efek animasi icon di sebelah kirinya.

Sebelumnya saya pernah membuat artikel yang sama tentang cara membuat note box/catatan ketengan atau  quote di postingan blogger dengan icon png di sebelahnya. Namun kali ini saya membuatnya dengan icon font awesome dengan sedikit efek animasi.

Kota catatan (note box) ini sebenarnya hasil modifikasi dari block quotes yang sebelumnya saya pernah posting. 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.

Cara Membuat Kotak Catatan Keren di Blogger

1. Buka Blog anda > 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}
/* Anamasi 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 Compose)

Versi 1

<div class="notes notes1">TULISAN ANDA DISINI</div>

Versi 2

<div class="notes notes2">TULISAN ANDA DISINI</div>

Versi 3

<div class="notes notes3">TULISAN ANDA DISINI</div>

Versi 4

<div class="notes notes4">TULISAN ANDA DISINI</div>

Versi 5

<div class="notes notes5">TULISAN ANDA DISINI</div>

Versi 6

<div class="notes notes6">TULISAN ANDA DISINI</div>

Versi 7

<div class="notes notes7">TULISAN ANDA DISINI</div>

Demikianlah Cara Membuat Kota Catatan Keren di Blogger dengan Efek Animasi pada postingan, semoga artikel ini dapat bermanfaat untuk kita semua, Terimakasih.

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar