 |
| CSS Blockquote Untuk Blogger Keren |
CSS Blockquote Untuk Blogger Keren menggunakan pseudo element blockquote:after dan blockquote:before pada blogger anda.
Ada bebrapa hal yang sering digunkan blockquote menggunakan p ataupun paragraph dalam sebuah elemen blockquote, dan beberapa platform blog seperti blogger, karena kebanyakan blogger tidak menggunkan paragraph (P) tapi mareka menggukan line break (BR) dalam artikelnya.
Ini lah kode 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;}
Untuk Penjelasan Diatas:
Untuk anda suka dengan warna pilhan cukup ubah kode color: #3498DB;. jika ingin mengubah warna sesuai pilihan dengan generate color masuk ke halaman FLAT UI COLOR PICKER.
Penjelasan diatas menggukan kode blockquote p {display:inline} supaya markup HTML p dalam blockquote tampilannya tidak nampak karuan.
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.
Nah pasti kalian nanyak dimana menggukan blockquote di html? Tenang 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>Untuk Hasilnya bisa kalian lihat DEMO dibawah ini :
Hanya ini penjelasan CSS Blockquote Untuk Blogger Keren semoga bermanfaat dan jangan lupa kebiasaan biasa untuk meninggalkan jejak biar Greget..
0 komentar