Cara Membuat Kotak Catatan Keren di Blogger

ipung.net - Cara Membuat Kotak Catatan Keren di Blogger - Banyak model untuk mempercantik tampilan postingan blog, salah satunya dengan memberi tampilan kotak catatan. Banyak model yang dapat dibuat, namun kali ini ipung.net akan memberikan tutorial dalam membuat kotak catatan keren di blogger yang keren loh. Gak tanggung-tanggung ada 7 pilihan warna dengan ikon yang top markotop. Simak selengkapnya di bawah sini ya.

Cara Membuat Kotak Catatan Keren di Blogger

1. Loggin di Blog anda dan pilih Menu Tema > kemudian pilih Menu Edit HTML
2. Letakkan kode berikut ini tepat di atas kode ]]></b:skin> atau </style>

/* Note Box Icon ipung.net*/ .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} /* Animasi Note Box ipung.net */ .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. Penerapan di postingan blog silahkan anda pilih menu New Entri dan masukkan kode di bawah ini pada menu HTML

Versi 1

<div class="notes notes1">TULISAN ANDA DISINI</div>

TULISAN ANDA DISINI

Versi 2

<div class="notes notes2">TULISAN ANDA DISINI</div>

TULISAN ANDA DISINI

Versi 3

<div class="notes notes3">TULISAN ANDA DISINI</div>

TULISAN ANDA DISINI

Versi 4

<div class="notes notes4">TULISAN ANDA DISINI</div>

TULISAN ANDA DISINI

Versi 5

<div class="notes notes5">TULISAN ANDA DISINI</div>

TULISAN ANDA DISINI

Versi 6

<div class="notes notes6">TULISAN ANDA DISINI</div>

TULISAN ANDA DISINI

Versi 7

<div class="notes notes7">TULISAN ANDA DISINI</div>

TULISAN ANDA DISINI

Demikianlah tutorial ini semoga dapat bermanfaat