Cara Membuat Blockquote Kertas Lipat yang Keren di Blog

Rindumagz - Kesempatan kali ini admin akan membagikan tutorial Cara Membuat Blackquote Style Kertas Lipat di Blog.  Pastinya kalian pernah menulis artikel dengan suatu tulisan atau kalimat yang penting, sehingga memerlukan block dengan quote.

Meskipun pada template blogger sudah disediakan Blockquote, tetapi beberapa dari kalian ingin mendesain sendiri agar terlihat tidak membosankan. Fitur ini berfungsi untuk memperjelas bahwa terdapat kalimat penting pada artikel yang dibuat.

Cara Membuat Blackquote Desain Kertas Lipat di Blog

1. Login di blogger.com terlebih dahulu

2. Pilih dashboard menu TEMA > Edit HTML

3. Cari kode ]]></b:skin> menggunakan CTRL+F, Paste dan copy kode CSS dibawah ini tepat DIATAS kode tersebut.

/* 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.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}

4. Klik Simpan Tema dan Selesai.

Berikut ini adalah penerapan blockquote di Artikel, terdapat 4 warna dan code pemanggil yang bisa kalian pilih sendiri. Untuk penerapannya pastekan salah satu code dibawah ini menggunakan mode HTML bukan Compose.

Blockquote Warna Biru

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

Blockquote Warna Kuning

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

Blockquote Warna Hijau

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

Blockquote Warna Merah

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

Untuk kamu yang menggunakan template AMP, bisa diterapkan dengan cara memasang kode CSS Blockquote tersebut di kode <style amp-custom='amp-custom'>. 

DemoClick here

Gimana mudahkan tutorialnya Cara Membuat Blackquote Dengan Style Kertas Lipat di Blog. Jika kamu memiliki pertanyaan untuk artikel ini, silahkan komentar tepat dibawah artikel ini ya.

Bagikan Artikel ini