Hai sob Banyak model untuk mempercantik tampilan postingan blog anda, salah satunya dengan memberi tampilan animasi yang sangat keren untuk kotak catatan informasi di blog. Banyak model yang dapat dibuat, namun kali ini saya akan memberikan tutorial dalam membuat kotak catatan di blogger yang keren bingit tentunya, responsiva dan beranimasi loh. untuk membuat kotak catatan ini cukup mudah silahkan anda ikuti langkah langkah di bawah ini dengan teliti ya
Pertama silahkan buka dashboar blogger anda kemudian pilih tema dan edit HTML kemudian letakan kode Css berikut di bawah ini di atas ]]></b:skin> atau </style>
/* Box Catatan */
.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}
.good:before{color:#21a796;content:'\f087';} .good{background:#cfffe6;color:#565656}
.bad:before{color:#f95060;content:'\f088';} .bad{background:#f9bfc5;color:#565656}
.info:before{color:#2387c1;content:'\f06a';} .info{background:#c8d9e2;color:#565656}
.ceklis:before{color:#1aa687;content:'\f00c';} .ceklis{background:#6dedd0;color:#565656}
.warning:before{color:#f63a50;content:'\f00d';} .warning{background:#fb818f;color:#fff}
.quote:before{color:#f7871a;content:'\f10d';} .quote{background:#f5b474;color:#fff}
.kuning:before{color:#969696;content:'\f0c1';} .kuning{background:#f5f68e;color:#565656}
/* Anamasi Icon*/
.good:hover:before,.bad:hover:before,.info:hover:before,.ceklis:hover:before,.warning:hover:before,.quote:hover:before,.kuning: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)}}Kedua. Untuk menggunakan kotak catatan tersebut silahkan penulisannya dalam postingan anda dengan mode HTML, ingat HTML bukan mode compose, dan berikut kode yang harus anda tulis. silahkan sesuaikan dengan kebutuhan anda ya..
<div class="notes good">Ini contoh blockquote good</div>
<div class="notes bad">Ini contoh blockquote bad its</div>
<div class="notes info">Ini contoh blockquote info</div>
<div class="notes ceklis">Ini contoh blockquote ceklis</div>
<div class="notes warning">Ini contoh blockquote warning</div>
<div class="notes quote">Ini contoh blockquote quote</div>
<div class="notes kuning">Ini contoh blockquote Warna kuning</div>Sebagai catatan apabila icon pada kotak informasi catatan anda tidak muncul itu dikarenakan belum terpasang Fontawesome, untuk itu silahkan pasangkan dulu script fontawesome di bawah kode <head>. semoga tutorial ini bisa menambah cantik blog anda