Kali ini saya akan membuat tutorial bagaimana cara membuat blockquote yang cantik dan sederhana menggunakan pseudo element blockquote:after dan blockquote:before pada blogger anda.
Kebanyakan tutorial blockquote menggunakan p atau paragraph didalam sebuah elemen blockquote, tetapi di beberapa platform blog seperti blogger, hal ini tidak berlaku, karena kebanyakan blogger tidak meggunakan paragraph(P) tapi menggunakan line break(BR) untuk posting nya.
Berikut adalah CSS blockquote nya:
/* CSS blockquote */
blockquote{font-family: Georgia, "Times New Roman", serif;margin:0px;color: #b4b4b4;font-weight: 400;line-height: 20px;font-style: italic;text-indent: 65px;position: relative;background: #fff;border-left:3px solid #f8f8f8;padding: 20px;}
blockquote:before{content: '\201C';position: absolute;font-size: 85px;top: 25px;left: -45px;color: #3498DB;}
blockquote:after{content: '\201D';position: absolute;font-size: 85px;bottom: -10px;right: 25px;color: #3498DB;}
blockquote p {display: inline;}
Keterangan diatas:
Jika anda ingin mengganti warna tanda quote cukup ubah kode color: #3498DB;. Jika anda kode warna apa yang cocok bisa anda coba generate color dihalaman flat ui color picker.
Diatas menggunakan kode blockquote p {display:inline} untuk menjaga agar markup HTML p dalam blockquote tampilannya tidak menurun.
Diatas adalah kode dasar CSS nya, jika anda ingin mengubahnya pada blogger anda, silahkan anda edit template dan anda cukup menghapus kode css blockquote{} ganti dengan kode CSS diatas.
Jika anda tidak tahu cara edit template Berikut adalah tutorialnya:
Cara edit template blogger atau blogspot.
Lalu bagaimana penggunaan blockquote di html? Anda cukup memasukkan markup HTML sebagai berikut:
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</blockquote>
Hasil dari kode diatas bisa anda lihat pada demo dibawah:
Mudah sekali bukan, semoga bermanfaat
0 komentar