Cara Membuat Catatan Keren Dengan Efek Lipatan

memasang catatan dengan efek lipatan - bagi anda yang mempunyai blog tutorial. anda wajib membuat catatan yang penting untuk artikel anda sendiri. efek ini di buat dengan css dan saat di hover ( arahkan mouse ke catatan ) akan terbuka lipatan seperti kertas.

Memasang Catatan Dengan Efek Lipatan Keren
1. Buka Blogger > Theme > Edit HTML.
2. Tambahkan script bawah ini. terapkan di atas ]]></b:skin>.

/* CSS Note by Surya Pero */
.note{position:relative;width:30%;padding:1.2em 1.5em;margin:2em auto;color:#fff;background:#2ecc71;overflow:hidden}
.note.orange{background:#f39c12}
.note.crusta{background:#F2784B}
.note.river{background:#3498db}
.note:before{content:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;border-color:#fff #fff #27ae60 #27ae60;background:#27ae60;box-shadow:0 1px 1px rgba(0,0,0,0.3),-1px 1px 1px rgba(0,0,0,0.2);display:block;width:0}
.note.orange:before{border-color:#fff #fff #e67e22 #e67e22;background:#e67e22}
.note.crusta:before{border-color:#fff #fff #de6e45 #de6e45;background:#de6e45}
.note.river:before{border-color:#fff #fff #2980b9 #2980b9;background:#2980b9}

3. Simpan themplate anda.

Kemudian cara menggunakan catatan lipatannya mudah, dengan cara pilih salah satu script Html di bawah ini sesuai kesukaan anda.
Warna Hijau

<div class='note'>...ISI DENGAN CATATAN ANDA...</div>

Warna Orange Tua

<div class='note orange'>...ISI DENGAN CATATAN ANDA...</div>

Warna Biru

<div class='note river'>...ISI DENGAN CATATAN ANDA...</div>

Warna Merah Muda

<div class='note crusta'>...ISI DENGAN CATATAN ANDA...</div>

Salin script diatas, nanti paste kan di artikel anda dan letakkan sesuai lokasi anda mau.

Demikianlah cara memasang catatan dengan efek lipatan. semoga bermanfaat bagi anda.

Berbagi :