Wah, artikel yang membahas tentang tutorial seputar blogger lumayan banyak nih sob di blog yang baru ane bangun inih, apalagi akan lebih baik jika ilmu yang baru kita dapatkan langsung kita bagikan ke dalam sebuah artikel untuk sobat blogger yang lain. Okeih, pada kesempatan ini saya akan sharing ke sobat tentang bagaimana cara mengedit tampilan Quote atau Blockquote standar yang di miliki blogger, seperti sobat ketahui, blockquote yang dimiliki oleh blogger terlihat biasa-biasa saja dan bagi saya mungkin kurang keren, serasa terlalu jadul gitu dengan tampilannya yang berwarna karamel dan cokelat terang. hehehe. Sebagai contoh, sobat bisa lihat gambar di bawah ini.
Sebelumnya, apakah sobat sudah mengetahui apa fungsi dari blockquote ini? Blockquote berfungsi sebagai Highlighter dan membuat artikel sobat menjadi terlihat jelas serta menarik untuk dilihat.
Contoh Blockquote yang Eye Catching hehe |
Untuk cara mengeditnya sangat gampang sekali loh sob, sobat tinggal masuk ke Menu Template, kemudian pilih Edit HTML, gunakan CTRL+F untuk melakukan pencarian kode, sekarang sobat ketikkan "blockquote" pada kolom pencarian, akan muncul beberapa kode "blockquote", lalu sobat cari saja "blockquote" yang mirip seperti kode dibawah ini:
blockquote {background:#fcf4ca;position:relative;margin:15px 0;border-left:3px solid #c69f73;font-weight:400;padding:12px 15px;color:#77735c;box-shadow:3px 3px rgba(0,0,0,0.1);}
Jika kode blockquote sobat sama seperti diatas, maka akan mempermudah sobat dalam memahami apa yang saya tulis pada tutorial ini. Kode blockquote diatas merupakan kode blockquote standar dari blogger. Sobat tinggal mengganti saja kode warna yang saya beri bold warna merah, biru, dan hijau. Kode warna yang saya beri warna merah No.3(#fcf4ca) merupakan kode warna dari background blockquote, sementara kode warna yang saya beri warna biru No.1(#c69f73) adalah kode warna dari garis yang muncul di sebelah kiri blockquote, dan terakhir kode warna yang saya beri warna hijau No.2(#77735c) merupakan kode warna dari tulisan yang ada di dalam blockquote. Lebih jelasnya sobat lihat gambar di bawah ini.
Oiyah, untuk mencari kode warna yang sobat inginkan bisa kunjungi Color-Hex, kemudian jika sobat sudah mendapatkan kode warna yang dicari, tinggal sobat copy pastekan kode warnanya pada kode blockquote diatas, di bawah ini merupakan kode blockquote dari blog saya yang sudah saya ganti kode warnanya.
blockquote {background:#dfe3ee;position:relative;margin:15px 0;border-left:8px solid #3b5998;font-weight:400;padding:12px 15px;color:#33332e;box-shadow:3px 3px rgba(0,0,0,0.1);}
Tampilannya akan seperti gambar diatas sob. |
Yup, hanya itu saja sob tutorialnya, mudah kaaaan?? Intinya kita cuma mengganti kode warnanya saja sob untuk mempercantik tampilan blockquote standar dari blogger. Jika sobat ada kesulitan dalam mengedit kode warna blockquote diatas, sobat tinggal komen saja di artikel ini, saya akan membantu sobat mengedit kode warna blockquote nya sampe bisa. Akhir kata, semoga berhasil ya sob, sampai jumpa di artikel blogger yang lainnya.
komen disini yah sob
ReplyDeleteKalau saya quotenua biasa aja. Moga aja bisa menarik setelah ikutin tutorial ini
ReplyDelete