Cara Membuat Kotak Catatan Dengan Efek Animasi Icon Keren di Postingan Blog
14 September 2020
Tulis Komentar
Sesuai judul artikel, kali ini saya akan berbagi tutorial cara membuat note box ( Kotak Catatan ) di blogger. Dengan mempercantik tampilan web site / blog kita pastinya banyak pengunjung yang tertarikan dan nyaman jika melihat postingan kita pastinya. Kotak catatan yang saya berikan ada 6 style yaitu note box bagus, jelek, peringatan, centang, dilarang dan terahlir note box berbagi. Dengan disertai efek animasi icon membuat kotak catatan semakin keren dilihat oleh pengunjung.
Sebenarnya sudah banyak sekali dalam yang membuat tutorial kotak catatan di blog, namun yang saya buat kai ini juga tidak kalah keren dan menarik dengan yang lain dong. Ok langsung saja simak tutorial di bawah ini.
Cara Membuat Note Box ( Kotak Catatan ) Keren Di Blog
1. Pertama login blogger anda. Kemudian pilih Menu Tema, setelah itu pilih Edit HTML.
2. Selanjutnya, kalian pasang script font awesome di template kalian dengan cara letakkan kode dibawah ini tepat diatas kode </head>.
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">Jika dalam template kalian sudah memasang script font awesome lewati langkah yang kedua ini dan lanjut langkah berikutnya.
3. Silakan cari kode ]]></b:skin> dan letakkan kode di bawah ini tepat di atas kode ]]></b:skin>.
/* 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)}}<div class="notes notes1">NOTE BOX ATAU CATATAN ADALAH TEMPAT UNTUK MENULIS </div>
<div class="notes notes2">NOTE BOX ATAU CATATAN ADALAH TEMPAT UNTUK MENULIS</div>
<div class="notes notes3">NOTE BOX ATAU CATATAN ADALAH TEMPAT UNTUK MENULIS</div>
<div class="notes notes4">NOTE BOX ATAU CATATAN ADALAH TEMPAT UNTUK MENULIS</div>
<div class="notes notes5">NOTE BOX ATAU CATATAN ADALAH TEMPAT UNTUK MENULIS</div>
<div class="notes notes7">NOTE BOX ATAU CATATAN ADALAH TEMPAT UNTUK MENULIS</div>Jika Anda hanya ingin memasang kode salah satu dari kotak catatan di atas contoh di bawah ini.
<div class="notes notes1"> NOTE BOX ATAU CATATAN ADALAH TEMPAT UNTUK MENULIS </div>Sekian dari saya itulah cara membuat note box ( kotak catatan ) keren dengan efek animasi di blog. Jika artikel ini bermanfaat jangan lupa share. Selamat mencoba!
