Cara Membuat Blockquote Keren di Blog
Contohnya ketika kita membuat atau menulis sebuah artikel di dalam blog maka dapat dipastikan akan ada sebuah blok kalimat/tulisan penting yang perlu disampaikan kepada pembaca. Dan salah satu cara untuk melakukannya kita dapat menggunakan tool quote yang telah disediakan oleh platform blogger itu sendiri.
Blockquote ini juga berfungsi untuk code-code seperti HTML, CSS, jQuery, dll.
Sebenarnya blockquote di template default sudah ada namun blockquote bawaan blogger tampilannya mungkin agak kurang menarik dan terlihat biasa-biasa saja alias kurang keren, sehingga bisa jadi mungkin akan di abaikan oleh pengunjung namun jika anda membuat blockquote yang bagus maka perhatian untuk blockquote akan lebih di perhatikan. Pada akhirnya pemilik blog ingin membuat tampilan lebih menarik agar blog makin terlihat rapi dan keren pastinya. sehingga perlu dilakukan penambahan atau perubahan tampilan sesuai tema/topik tulisan masing-masing.
Sebenarnya mengenai Kotak Catatan seperti ini sudah banyak sekali di bahas oleh para blogger yang lain, namun untuk mendokumentasi ilmu yang saya dapat dari tetangga, saya Share kembali di blog ini.
Cara Membuat Blockquote Keren di Blog
Tutorial Membuat Kotak Catatan / Keterangan Di Postingan Blogger
- Seperti biasa, kalian harus sudah login ke akun blogger
- Selanjutnya masuk ke menu Template / Tema, Klik Edit HTML
- Kalo sudah masuk Edit HTML kalian cari kode </head>
- Setelah ketemu, masukan css costum blockquote dibawah ini tepat di atasnya
- Jika icon tidak muncul, pastikan kalian sudah memasang kode Font Awesome
.post-body blockquote {text-align: left;background: #1b9a62;position: relative;display: block;padding: 55px 20px 20px;color: #fff;border-radius: 3px;}
.post-body blockquote:before {position: absolute;content: 'Catatan';background: #0b6e3e;position: absolute;top: 0;padding: 9px 0;left: 0;right: 0;color: #fff;display: block;margin: 0;font-weight:700;text-indent: 15px;border-radius:3px 3px 0 0;}
.post-body 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;}- Jika sudah, Save Template kalian.
Jika ingin merubah kata Catatan Cari dan edit kode css yang telah saya tandai diatas
Dan jika ingin merubah warna, cari dan edit kode warna yang telah ditandai diatas
Memasang blockquote di postingan blog
- Kalian block terlebih dahulu text yang akan dimasukan ke dalam blockquote, lalu klik icon kutip dua di menu atas postingan, Lihat Gambar
- Nah begitu lah cara membungkus text dengan blockquote
- Kalo sudah tinggal publikasikan postingan kalian dan lihat hasilnya