Membuat Tampilan Blockquote menjadi Flat di Blog

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

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.

Rekomendasi:

  • Cara Menghapus Icon Obeng Tang Quickedit Blogger Agar Valid… Tidak seperti blog non-amp, dalam menggunakan blog amp karena setiap menambahkan widget baru, akan otomatis memunculkan quickedit untuk widget tersebut, hal tersebut akan membuat validasi amp blog kamu error seperti…
  • Cara Membuat Postingan Untuk Blogger Pemula Untuk seorang blogger pemula, hal yang harus pertama kali di kuasai adalah bagaimana cara membuat postingan, khususnya cara membuat postingan agar rapi sehingga mudah terindex oleh google. Alangkah baiknya sobat…
  • Menambahkan Slideshow Manual Responsive pada Blog Terbaru Pada tutorial kali ini saya akan menginformasikan bagaimana cara menambahkan slideshow manual responsive pada blog. Itung-itung sudah terlalu lama saya tidak membahas tentang tutorial blogger. Penggunaan slideshow bersifat optional, bisa…
  • Memperluas jangkauan website dengan Translator Widget Ada beberapa kondisi dimana yang berkunjung ke website sobat bukan hanya dari Indonesia saja. Ada dari United States, India, Nepal, dll. Ketika website yang sobat bangun berbahasa Indonesia dan untuk…
  • Cara Mudah Agar Blog Tidak Bisa Di Copy Bagaimana rasanya jika postingan sobat di copy/paste? tentu menyesakaan dada. Itu pernah dialami oleh saya, waktu itu saya sempat membuat postingan tentang akun instagram beberapa pemain film. Kemudian saya melakukan…
  • Membuat Text Responsive di Blog Jika sobat mengalami permasalahan tulisan pada postingan yang keluar dari garis tepi postingan, biasanya kejadian tulisan yang keluar dari garis seperti itu terjadi pada kolom komentar dalam versi mobile (hp)…
  • Menghilangkan peringatan Uni Eropa Cookie dari Google di… Apa sobat sudah mendengar peringatan dari Google tentang Uni Europe Cookie? yaitu peringatan yang bisa sobat lihat pada dasboard blog. Peringatan tersebut saya dapatkan ketika mengakses situs anak muda Masato.us…
  • Menemukan Kode Dengan Cepat di Edit HTML Blogger Dimana tempat untuk merubah tampilan blogger? Jawabannya adalah Edit HTML. Diperlukan jika Sobat ingin mengutak-atik tampilan blog, bisa menghapus atau menambahkan beberapa perubahan sesuai keinginan Sobat. Cara menggunakan Edit HTML…
  • Membuat Headline Breaking News Responsive di Blog Cara membuat breaking news responsive berjalan di blog seperti yang terlihat pada gambar bisa sobat buat dengan mudah. Dengan adanya headline maka blog kita akan terlihat seperti cuplikan berita berjala…
  • Merapikan Layout Tata Letak Blogger Yang Berantakan Pada postingan kali ini saya akan memberikan tips bagaimana mengatasi tata letak blog yang acak-acakan, cara mengatur tata letak blog agar terlihat rapi ini disebabkan template blogger sekarang banyak yang…

Leave a Comment