Cara Mudah Membuat Kutipan/Quote Otomatis di Posting Blog

PelangiBlog.Com - Kutipan atau Quote di posting blog berfungsi untuk menandai atau mengutip kalimat. Quote tidak hanya berfungsi untuk mengutipkalimat, tetapi juga biasa digunakan untuk mengutip beberapa kode script. Ini tentu penting agar pengunjung bisa membedakan kalimat atau kode script yang dikutip dengan kalimat penjelas.

Setiap blog tentu sudah difasilitasi adanya kutipan atau quote, tetapi terkadang quote pada blog yang Anda gunakan memiliki tampilan yang biasa dan menjenuhkan, terkadang juga tidak jelas dan memiliki tampilan hampir sama dengan kalimat lainnya.

Nah, dari sini saya ingin memberikan tutorial sederhana untuk membuat kutipan atau quote otomatis di posting blog. Untuk lebih jelasnya, Anda bisa memperhatikan langkah-langkah di bawah ini :

1. Login ke akun blogger Anda

2. Masuk Dashboard

3. Klik “Template”, lalu klik “Edit HTML”

4. Setelah itu cari kode di bawha ini :

]]></b:skin>

5. Letakkan kode di bawah ini tepat berada di atas kode ]]></b:skin> 

.post blockquote { background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6FP5qEMyJMbhHCfr3dXtPYiVbUWqjPMUDA5xBiYktRSxFuV60maqol7FRiuRSzpyI51RPQvmFwasMEBEYliRdvEFPQidw-5zwboxYjMS3OQihkuYOqT7e6UG5Uk-V1QY748EYgBgS0Ooc/s1600/QuoteSip.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 10px 45px; font-size: 0.9em; font: italic 1.0em Monotype Corsiva, "Times New Roman", Times, serif; } .post blockquote p { margin: 0; padding-top: 10px; }

6. Simpan template

Catatan :

• Warna biru menunjukkan warna background, Anda bisa mengubah dengan warna lainnya. Untuk mengetahui kode warna HTML, silahkan baca artikle berikut : Kumpulan Kode Warna HTML Paling Lengkap 
• Warna hijau menunjukkan gambar bingkai sebelah kiri. Jika Anda memiliki gambar lain, Anda pun bisa mengganti dengan URL dari gambar pilihan Anda
• Warna merah menunjukkan ukuran font, ganti dan sesuaikan dengan posting blog Anda
• Warna ungu menunjukkan jenis font, Anda juga bisa menggantinya 
• Untuk contoh quote pada tutorial ini, Anda bisa melihat gambar di bawah ini :