Cara Membuat Kotak Catatan Keren di Blogger - Kali ini aku akan membagikan cara menciptakan kotak catatan (note box) keren di postingan blogger dengan pengaruh animasi icon di sebelah kirinya.
Sebelumnya aku pernah menciptakan artikel yang sama wacana cara menciptakan note box/catatan ketengan atau quote di postingan blogger dengan icon png di sebelahnya. Namun kali ini aku membuatnya dengan icon font awesome dengan sedikit pengaruh animasi.
Kota catatan (note box) ini gotong royong hasil modifikasi dari block quotes yang sebelumnya aku pernah posting. Kotak catatan ini aku buat dengan 7 pilihan warna dan icon yang sanggup kalian pilih sesuai dengan impian kalian, atau bahkan sanggup mengubahnya impian kalian sendiri.
Cara Membuat Kotak Catatan Keren di Blogger
1. Buka Blog anda > pilih Menu Tema > lalu pilih sajian Edit HTML
2. Letakkan instruksi ini sempurna berada diatas instruksi ]]></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 gres lalu letakkan instruksi ini sajian 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, supaya artikel ini sanggup bermanfaat untuk kita semua, Terimakasih.
Sumber http://www.analisyuki.com/
