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.

Surya Seorang mahasiswa yang senang membagikan informasi yang sudah saya dapatkan. Informasi yang saya tulis blog ini, sesuai pengalaman saya dari pertama blog.

Berbagi :