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:

  • Baca Novel : Ancika, Dia yang Bersamaku Tahun 1995 - Pidi… Prolog Kisah yang akan saya bagikan ini dimulai dari masa remaja saya, 24 tahun yang lalu. Ini bukan cerita yang luar biasa, tapi merupakan kisah nyata tentang saya, yang saya…
  • Menambahkan Advanced Social Widget pada Sidebar Blogger Jika sobat berkunjung ke maxmanroe.com pada bagian bawah sebelah kanan ada widget subscribe. Widget tersebut sangat komplit karena selain subscribe email, informasi yang ditampikan juga berupa jumlah followers twitter, page…
  • Helen dan Sukanta - Pidi Baiq BAB I. Lacheden Javaan 1 Bulan Juni 2001 itu, saya merasa sangat senang bertemu dengan Nyonya Helen di restaurant Lachende Javaan, yaitu sebuah restaurant Indonesia yang cukup populer di Haarlem,…
  • Manuskrip Amsterdam - Pidi Baiq Cerita ini saya repost dari blog Pidi Baiq, selamat membaca... *** I DE DAMPKRING 1 Langit warna abu-abu dan rendah, tetapi belum hujan. Itu bulan Mei yang khas di tahun…
  • 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…
  • 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…
  • Memasang Script Anti AdBlock seperti Arlinadesign Bagaimana cara membuat script anti adblock seperti di website Arlina Design? Cara memasang script disable AdBlock di Blog sangat mudah, banyak javascript anti adblock yang berseliweran di google. Akan tetapi…
  • Daftar Lengkap Buku dan Novel Pidi Baiq Pidi Baiq adalah seorang seniman yang punya banyak kelebihan. Selain sebagai seorang musisi dan pencipta lagu, ia juga seorang penulis, ilustrator, pengajar dan komikus. Pidi Baiq mengaku imigran dari surga…
  • Mudah Menambahkan Penulis dan Admin Baru Dalam Satu Blog Bagaimana cara agar blog kita bisa membuat postingan dari orang lain tanpa harus login ke akun blog itu sendiri? Bisa, caranya yaitu dengan mengundang mereka menjadi penulis atau admin untuk…
  • Meningkatkan Kecepatan Internet Dengan Command Prompt (CMD) Kecepatan internet yang lambat adalah masalah yang tidak pernah berakhir yang mengganggu pengguna internet setiap saat. Terkadang masalah tersebut disebabkan konfigurasi jaringan, bisa juga masalah pada PC bahkan ISP itu…

Leave a Comment