kLAfYOEsUwKWcZE5EN4T8XHN0KE0jykePDkZX1nb
Cara Membuat Kotak Catatan di Blog Style Kertas Lipat

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>


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
SHARE

Related Posts

Subscribe to get free updates

Posting Komentar

Iklan Tengah Post