Cara Membuat Kotak Catatan Keren di Postingan Blog dengan Efek Animasi

Cara Membuat Kotak Catatan Keren di Postingan Blog dengan Efek Animasi

Cara Membuat Kotak Catatan dan Keterangan di Postingan Blog dengan Efek Animasi
AdityaTekno.com - Kali ini saya akan membagikan tutorial Cara Membuat Kotak Catatan Keren (Note Box) Info, Tips, Peringatan di Postingan Blogger. Kotak catatan yang akan saya bagikan ini ada efek animasi icon di sebelah kirinya.

Kotak catatan ini biasanya terdapat di blog tentang tutorial, tips dan trik juga beberapa informasi menarik lainnya. Untuk membuat kotak catatan pada blog ternyata bukan hal sulit untuk pengguna platform blogger, karena dengan sentuhan sedikit dengan menambahkan kode HTML dan CSS anda sudah bisa membuat kolom catatan pada artikel blog.

Baca Juga : Cara Membuat Syntax Highlighter di Blogger

Dan kotak catatan ini sebenarnya mirip dengan blockquotes. Kotak catatan ini terdapat 7 pilihan warna dan icon yang dapat anda pilih sesuai selera, atau bahkan anda bisa mengubahnya sendiri sesuai keinginan.

Baca Juga : Cara Membuat Syntax Highlighter Mirip Google Code di Blogger

Nah, jika anda tertarik memasang kotak catatan di postingan blog, silahkan ikuti langkah-langkahnya dibawah.

Cara Membuat Kotak Catatan Keren di Postingan Blog

Pertama, masuk ke Blogger >> Tema >> Edit HTML.

Kemudian, letakkan kode ini diatas kode ]]></b:skin> atau </style>
/* Kotak Catatan with Animasi 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 Icon*/
.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)}}

Setelah itu, klik Simpan Tema.

Baca Juga : Cara Membuat Tampilan Night Mode di Blogger dengan Cookie

Kemudian untuk menerapkan di postingan, buat entri baru / postingan baru >> letakkan kode ini di tab HTML (bukan Compose).

Versi 1
<div class="notes notes1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

Versi 2
<div class="notes notes2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

Versi 3
<div class="notes notes3">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

Versi 4
<div class="notes notes4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

Versi 5
<div class="notes notes5">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

Versi 6
<div class="notes notes6">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

Versi 7
<div class="notes notes7">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

Catatan : Ganti tulisan Lorem ipsum dolor sit amet, consectetur adipiscing elit. dengan tulisan versi anda.

Untuk melihat hasilnya seperti apa, bisa klik tombol dibawah ini.

Demikian Cara Membuat Kotak Catatan Keren di Postingan Blog. Semoga postingan ini bisa bermanfaat dan Terima kasih sudah berkujung. Salam AdityaTekno.com