Cara Terbaru Membuat Blackquote Dengan Style Kertas Lipat di Blogger

Ketika menulis artikel di blog terkadang ada suatu kalimat atau tulisan yang sangat penting sehingga perlu diblock dengan quote yang sudah tersedia secara default di platform blogger, tapi bagi sebagian blogger khususnya saya pribadi merasa blockquote yang sudah ada di blogger terlalu sederhana stylenya dan terkesan membosankan untuk dilihat.

Blockquote berfungsi untuk memperjelas bahwa ada kata atau kalimat yang menjadi point penting pada sebuah artikel, bisa juga kita gunakan untuk mempercantik tampilan blog.

Apa Itu Blackquote ?

Blockquote adalah sebuah mekanisme untuk menandai sebuah blok teks yang dikutip dari orang atau sumber lain, blockquote juga biasa digunakan untuk menandai script seperti HTML, CSS, Javascript ataupun syntax lain pada blog yang memuat konten tutorial, contoh blog yang menggunakan banyak sekali blockquote ini.

Cara Membuat Blackquote Dengan Style Kertas Lipat di Blogger

1. Silahkan kamu login ke blogger.com dengan menggunakan Gmail kamu.
2. Masuk ke menu TEMA > Klik Edit HTML
3. Cari kode berikut ini ]]></b:skin> atau </style> dan Pastekan kode dibawah ini tepat DIATAS kode tersebut.

/* CSS Note by Showdzgn.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}

4. Kalau sudah silahkan klik SIMPAN dan Selesai.

Bagaimana penerapan blackquote ini. 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 blackquote ini bisa diterapkan 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'>.

Bagaimana mudah bukan untuk tutorial Cara Membuat Blackquote Dengan Style Kertas Lipat di Blogger bagi kamu yang memiliki masalah atau pertanyaan seputar blogger silahkan komen di kolom komentar dibawah artikel ini.

Bagikan Artikel ini