Skip to main content
YUUARI

follow us

Cara Membuat Kotak Catatan di Blog Style Kertas Lipat

Pada postingan sebelumnya saya sudah memberikan tutorial cara membuat kotak catatan di blogger, tetapi tidak memakai efek kertas lipat dan sekarang saya akan membagikan script CSS untuk membuat kotak catatan dengan efek kertas lipas di sisi kanan kotak.

Oke, langsung saja simak langkah-langkah pembuatannya di bawah ini:

Membuat Catatan Dengan Efek Kertas Lipat di Postingan Blog

1. Buka akun blogger anda
2. Pada menu dasbor blogger pilih menu Tema > Edit Html
3. Cari kode ]]></b:skin> atau </style>
4. Salin kode CSS di bawah ini tepat di atas kode ]]></b:skin> atau </style>

/* CSS Note by yuuari.com*/
.note{position:relative;padding:1.2em 1.5em;margin:2em auto;color:#fff;background:#2ecc71;overflow:hidden}
.note.yellow{background:#f1c40f}
.note.red{background:#e74c3c}
.note.blue{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.yellow:before{border-color:#fff #fff #f1c40f #f1c40f;background:#f1c40f}
.note.red:before{border-color:#fff #fff #e74c3c #e74c3c;background:#e74c3c}
.note.blue:before{border-color:#fff #fff #3498db #3498db;background:#3498db}
5. Klik Simpan Tema untuk menyimpan perubahaan

Selanjutnya untuk penerapan pada postingan di blog lihat di bawah ini kode-nya dan salin di postingan dengan mode HTML bukan Compose.

Kotak Catatan Warna Hijau

<div class='note'>Kotak Catatan Warna Hijau</div>

Kotak Catatan Warna Kuning

<div class='note yellow'>Kotak Catatan Warna Kuning</div>

Kotak Catatan Warna Merah

<div class='note red'>Kotak Catatan Warna Merah</div>

Kotak Catatan Warna Biru

<div class='note blue'>Kotak Catatan Warna Biru</div>

Cek demonya dengan klik Open Filddle di bawah ini:


Apakah bisa di terapkan pada blog AMP HTML?
Untuk tutorial memasang kotak catatan style lipat kertas ini, bisa di terapkan pada blog AMP HTML dengan cara meletakan atau menyalin kode CSS-nya di kode <style amp-custom='amp-custom'>.

Demikian artikel kali ini tentang Cara Membuat Kotak Catatan di Blog Style Kertas Lipat. Terimakasih

You Might Also Like:

Comment Policy: Tinggalkan jejak tuliskan anda di komentar yang sesuai dengan topik postingan halaman ini. Komentar yang terdapat link tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar