Blockquote atau Pesan singkat memang perlu dipakai untuk beberapa alasan seperti untuk keterangan penting atau untuk penjelasan dan tentu setiap orang yang ingin menampilkan kutipan tersebut pasti ingin memiliki tampilan yang bagus dan simple. Disini saya akan membagikan Blockquote Material yang pasti dengan tampilan simple tapi menarik.
Pada Blockquote ini kalian bisa merubah setiap warna dengan mengganti nama classnya saja dengan begitu warna pada Blockquote akan berubah tergantung dari nama class.
Cara Membuat Blockquote Material
Masuk ke Dashboard blog > klik Tema > klik Edit HTML dan tambahkan kode berikut diatas kode </head>
<style>
.kutipan{overflow:hidden;position:relative;margin:.5rem 0 1rem;transition:box-shadow .25s;border-radius:2px;color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);padding:20px;font-size:14px}.kutipan.default{background:#03a9f4}.kutipan.success{background:#4CAF50}.kutipan.warning{background:#F44336}.kutipan.danger{background:#ff9800}
</styleSetelah itu klik tombol Simpan tema.
Untuk penambahan Blockquote seperti biasa hanya saja kalian harus merubah nama class nya saja yang dari sebelumnya seperti ini
<blockquote class='tr_qc'>
Your Blockquote
</blocquote>Dirubah menjadi seperti ini
<blockquote class='kutipan default'>
Your Blockquote
</blocquote>Blockquote ini ada 4 style yang bisa kalian coba diantaranya Default, Success, Warning, Danger
Default
<blockquote class="kutipan default">
“Seorang Pria sejati tidak akan pernah melukai seorang wanita”<br>
Kuro Ashi Sanji
</blockquote>Success
<blockquote class="kutipan success">
“Mau bermanfaat atau tidak, yang namnya teman harus di tolong” <br>Ueki Anime Law Of Ueki
</blockquote>Warning
<blockquote class="kutipan warning">
“Bagaimana kau bisa melangkah ke depan, bila kau terus menyesali masa lalumu?”<br>Edward Elric – Fullmetal Alchemist
</blockquote>Danger
<blockquote class="kutipan danger">
“Kebohongan menyelamatmu sementara, tapi menghancurkanmu selamanya.” <br>L – Death Note
</blockquote>