Membuat Kotak Catatan Keren di Blogger

Anang_at
Di kesempatan kali ini saya akan membgaikan panduan Cara Membuat Kotak Catatan Keren di Blogger. Dengan kita mempercantik tampilan web site / blog kita pastinya banyak pengunjug yang tertarikan pastinya itu.

Banyak sekali dalam membuat Kotak Catatan di blog, namun yang saya buat kai ini juga tidak kalah keren dengan yang lain loh, oky langsung saja ke padnyanya ya TKP.

Cara mempercantik pembuatan Kotak Catatan Keren di Blogger


Langkah - langkah Cara Membuat Kotak Catatan Keren di Blogger
  • Long in ke dasbor blogger. Pilih Tema dan Edit HT
  • 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)}}

  • Penerapan di postingan blog silahkan anda pilih menu New Entri dan masukkan kode di bawah ini pada menu HTML/ Java Script.

Pilih Untuk model Kotak Catatan :


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


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


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

Tanda Like Terbalik ( Warna merah jambu )

<div class="notes notes2">TULISAN ANDA DISINI</div>
Tanda X ( Silang ) ( Warna Merah Jambu )

<div class="notes notes5">TULISAN ANDA DISINI</div>
Tanda Petik dua ( Warna Oren )

<div class="notes notes6">TULISAN ANDA DISINI</div>
Logo URL / Link ( Warna kuning )

<div class="notes notes7">TULISAN ANDA DISINI</div>
Semoga panduan yang saya bagikan kali ini bisa bermanfaat.
Comments

Komentar

Cancel