Membuat Tampilan Blockquote menjadi Flat di Blog

Advertisement

Bagaimana cara membuat blockquote flat di blogger? Pada dasarnya blockquote default pada sebuah template sudah ada, hanya saja tampilannya kurang kece, sehingga di perlukan beberapa perubahan pada kode css nya.

Tampilan blockquote yang satu ini akan berbentuk flat, blockquote itu sendiri gunanya adalah untuk memberikan penekanan/ catatan penting yang di sampaikan oleh penulis untuk pembaca, code HTML untuk menampilkan blockquote adalah <blockquote>tulisan kita</blockquote>

Cara membuat Blockquote Flat


membuat tampilan blockquote menjadi flat di blog

1. Login pada akun Blogger
2. Masuk ke Theme → Edit HTML
3. Cari kode </head>
4. Masukan CSS di bawah ini tepat di atas kode tersebut

blockquote {text-align: left;background: #999999;position: relative;display: block;padding: 55px 20px 20px;color: #fff;}
blockquote:before {position: absolute;content: 'Catatan';background: #666666;position: absolute;top: 0;padding: 9px 0;left: 0;right: 0;color: #fff;display: block;margin: 0;font-weight:700;text-indent: 15px;}
blockquote:after {display: inline-block;content: "\f0a1";font-family: fontAwesome;font-style: normal;font-weight: normal;font-size: 18px;color: #fff;top: 0;right: 0;padding: 9px 14px;position: absolute;}

Catatan:
  • Bisa sobat lihat untuk kode CSS tersebut hanya berupa "blockqoute" langsung kode css nya, jika tidak berhasil sesuaikan dengan kode blockqoute di template blog sobat, ada yang .blockquote atau .post-body blockquote
  • Silahkan ganti kode warna #999999 dan #666666 sesuai keinginan sobat

5. Save template, Finish!

Itu saja tutorial mudah cara mengganti tampilan blockquote menjadi flat, semoga bermanfaat dan silahkan di praktekan langsung.

Advertisement
Membuat Tampilan Blockquote menjadi Flat di Blog Membuat Tampilan Blockquote menjadi Flat di Blog Reviewed by Shici Kun on Rating: 5

Diberdayakan oleh Blogger.