Membuat Kotak Catatan Dengan Icon dan Animasi - Hendrix Cat

    Social Items

Hendrix Cat

Metaltaila.co Adalah Blog Berbagi Template Premium


Hai sob zaman sekarang Banyak tutorial model untuk mempercantik tampilan postingan blog, salah satunya dengan memberi tampilan box untuk kotak catatan. Banyak model yang dapat dibuat, namun kali ini ipung.net akan memberikan tutorial dalam membuat kotak catatan keren di blogger yang keren, responsiva dan beranimasi loh. untuk membuat kotak catatan ini cukup mudah silahkan anda ikuti langkah langkah di bawah ini.

Pertama silahkan buka dashboar blogger anda kemudian pilih tema dan edit HTML kemudian letakan scrip 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)}}
Setelah itu silahkan save template anda

Kedua. Untuk menggunakan kotak catatan tersebut silahkan penulisanna dalam postingan anda dengan mode HTML, ingat HTML bukan mode compose, dan berikut code scripnya

<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>

Ok Slur itulah tutorial Membuat Kotak Catatan Dengan Icon dan Animasi pada blogger, nxt time akan berjumpa di tutorial selanjutnya. Terimakasihh

Membuat Kotak Catatan Dengan Icon dan Animasi


Hai sob zaman sekarang Banyak tutorial model untuk mempercantik tampilan postingan blog, salah satunya dengan memberi tampilan box untuk kotak catatan. Banyak model yang dapat dibuat, namun kali ini ipung.net akan memberikan tutorial dalam membuat kotak catatan keren di blogger yang keren, responsiva dan beranimasi loh. untuk membuat kotak catatan ini cukup mudah silahkan anda ikuti langkah langkah di bawah ini.

Pertama silahkan buka dashboar blogger anda kemudian pilih tema dan edit HTML kemudian letakan scrip 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)}}
Setelah itu silahkan save template anda

Kedua. Untuk menggunakan kotak catatan tersebut silahkan penulisanna dalam postingan anda dengan mode HTML, ingat HTML bukan mode compose, dan berikut code scripnya

<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>

Ok Slur itulah tutorial Membuat Kotak Catatan Dengan Icon dan Animasi pada blogger, nxt time akan berjumpa di tutorial selanjutnya. Terimakasihh
Load Comments

Subscribe Our Newsletter

Notifications

Disqus Logo