Membuat Blockquote Cantik di Blogger dengan CSS


 Blockquote Cantik di Blogger dengan CSS

Kali ini saya akan membuat tutorial bagaimana cara membuat blockquote yang cantik menggunakan 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 menggunakan paragraph(p) tapi menggunakan line break(BR) untuk postingnya.


Berikut adalah CSS blockquotenya
/* 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.


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 Response to "Membuat Blockquote Cantik di Blogger dengan CSS"

Post a Comment

Ditunggu komentarnya ya? Semoga sajian dari situs ini bermanfaat dan bisa dishare ke lainnya :)