Sebagaimana yang kita ketahui, Blogger menyediakan fitur dalam membuat post yang bernama blockquote. Blockquote sendiri merupakan fitur yang dapat membuat kotak kutipan khusus yang berguna untuk membedakan mana kalimat biasa dan kalimat penting / khusus.
Kali ini saya ingin membuat tutorial memodifikasi blockquote bawaan blogger menjadi beberapa macam style, sehingga anda dapat membuatnya sendiri.
Seperti yang saya katakan diatas tadi, dalam tutorial kali ini anda dapat membuat beberapa macam blockquote. Hanya dengan mengganti class yang terdapat di BQ nya, warna, bentuk, atau style nya akan berubah.
Misal anda memberikan class kode pada blockquote nya. Maka bentuknya akan menjadi bundar, memiliki scroll, berganti warna, dan sebagainya, sesuai dengan keinginan anda. Mari kita belajar dari awal.
Tutorial Modifikasi Blockquote Blogger Menjadi Beberapa Macam Style
1. Penghapusan Style lama
Tentunya yang pertama anda harus lakukan adalah menghapus semua CSS blockquote yang lama pada template anda agar tidak terjadi error. Cara menghapusnya ialah dengan mencari semua kode berikut didalam Edit HTML
blockquote { ..... }
Jangan lupa untuk mem-backup terlebih dahulu template agar bila terjadi error anda tidak kesulitan memperbaikinya. Setelah di backup dan semua kode CSS bawaan dihapus, lanjut ke cara modifikasi nya.
2. Modifikasi menjadi beberapa style
Disini saya akan memberikan 2 macam style nya, yang pertama BQ untuk kode, yang kedua untuk kalimat keterangan atau kutipan khusus. Bentuk yang akan kita buat nantinya adalah seperti ini:
Warna biru merupakan untuk menempatkan kode, sedangkan hijau untuk kalimat biasa.
Pertama, tentukan dulu class yang anda inginkan untuk setiap blockquote, misal pada tutorial kali ini untuk tulisan kode class nya bernama code. Sedangkan untuk tulisan biasa, class nya bernama quote. Usahakan berikan nama yang simpel dan mudah diingat agar tidak mudah lupa, dan jangan lupa catat tiap class di notepad atau semacamnya agar tidak hilang
Lalu, mari sekarang kita buat style CSS nya.
<style>
blockquote.code { ..... }
blockquote.quote { ..... }
</style>
Kode diatas merupakan gambaran umum CSS yang akan kita buat. Titik-titik yang saya beri diatas nantinya akan kita isi dengan style untuk masing-masing style blockquote.
blockquote.code { ..... }
Merupakan kode CSS untuk class code, alias blockquote yang akan kita gunakan nantinya untuk menempatkan tulisan berupa kode. Kebalikan dengan kode ini:
blockquote.quote { ..... }
Kode CSS ini digunakan untuk blockquote yang nantinya akan kita isi dengan kalimat biasa.
Sekarang mari kita modifikasi...
<style>
blockquote.code {
background: blue; /* Ganti blue dengan warna background anda */
padding: 15px; /* Ganti 15px dengan jarak dalam kotak dengan tulisan */
color: white; /* Ganti white dengan warna tulisan didalam kotak */
}
blockquote.quote {
background: green; /* Ganti green dengan warna background anda */
padding: 20px; /* Ganti 20px dengan jarak dalam kotak dengan tulisan */
color: black; /* Ganti black dengan warna tulisan didalam kotak */
}
</style>
Simpan kode diatas di dalam tag head. Anda juga dapat menambahkan atribut lain pada CSS diatas, seperti margin untuk jarak luar, width untuk lebar, dan lainnya. Anda harus memiliki setidaknya basic skill dari CSS agar paham dengan sempurna.
3. Penerapan ke dalam blog
Masih ingat kan apa class masing-masing blockquote tadi? Ya, class code dan quote, code untuk kode dan quote untuk tulisan biasa. Sekarang tugas anda adalah membuat artikel seperti biasa, lalu jangan lupa berikan blockquote untuk kode dan kata khusus yang terdapat didalam postingan.
Setelah selesai, masih di dalam editor postingan, masuklah ke dalam mode HTML, sebelahnya Compose. Lalu cari semua kode blockquote yang ada. Biasanya berbentuk seperti ini:
<blockquote class="tr_bq">
... isi tulisan yang ada di dalam blockquote ...
</blockquote>
Ganti class tr_bq dengan class yang sudah anda buat tadi, yaitu code dan quote. Sesuaikan class dengan isi yang ada didalam BQ. Sehingga kurang lebih penampakan akhirnya seperti ini:
<blockquote class="code">
... isi tulisan yang ada di dalam blockquote ...
</blockquote>
atau
<blockquote class="quote">
... isi tulisan yang ada di dalam blockquote ...
</blockquote>
Simpan postingan, lalu publikasikan. Selamat! Kini anda sudah membuat 2 macam style blockquote yang berlaku selama-lamanya. Bila anda melakukan tutorial diatas, bisa saya pastikan 100% berhasil. Anda juga bisa menambahkan class lainnya, sebanyak-banyaknya asalkan anda ingat.