Cara Membuat Blockquote Kertas Lipat yang Keren di Blog

Nikamicode - Cara Membuat Blockquote Kertas Lipat yang Keren di Blog Pastinya kalian pernah melihat suatu artikel penting yang di Blockquote kan ? Nahh kali ini Nikamicode akan share Cara Membuat Blockquote Kertas Lipat yang Keren di Blog.

Selain memberikan tampilan yang sangat bagus dan cantik blockquote ini ada beberapa variasi warna dari merah, kuning, hijau dan biru, oke langsung saja ke cara pembuatan nya yah

Cara Membuat Blockquote Kertas Lipat yang Keren di Blog

---

1. Buka Akun Blogger kamu

2. Pilih Dashboard Tema > Edit Tema

3. Kemudia kamu cari kode ]]></b:skin> untuk mempermudah pencarian kamu bisa gunakan CTRL + F lalu ketikan ]]></b:skin>, lalu kamu copy paste kan kode ini tepat diatas kode ]]></b:skin>.

/* CSS Blockquote AE */
.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: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.blue{background:#3498db}
.note.yellow:before{border-color:#fff #fff #f1c40f #f1c40f;background:#f1c40f}
.note.blue:before{border-color:#fff #fff #3498db #3498db;background:#3498db}
.note.red:before{border-color:#fff #fff #e74c3c #e74c3c;background:#e74c3c}

4. Kemudia langkah terakhir kamu save/Simpan tema

Berikut ini Cara penerapan kode Blockquote nya jadi dikode ini terdiri dari 4 warna ya oke langsung saja ke cara penerapan nya mari simak kode nya dibawah ini.

Blockquote Warna Biru

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

Blockquote Warna Hijau

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

Blockquote Warna Kuning

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

Blockquote Warna Merah

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

Untuk kamu yang menggunakan Template Amp kamu bisa menggunakan kode ini  <style amp-custom='amp-custom'>.

Oke bagaimana mudah bukan hehe terimakasih sudah berkunjung dan jangan lupa beri vote nya dan jangan lupa share yah hehe

Jika kamu copas artikel ini harap cantum kan link sumber nya ya

Related Posts