Dalam membuat artikel, ada kalanya sobat ingin membuat kutipan atau biasa disebut quote dalam bahasa inggris. Kutipan ini memiliki banyak manfaat, salah satunya adalah untuk memberikan penanda dan memberikan sorotan pada kalimat.
Untuk membuat postingan tentang tutorial pemrograman misalnya, sobat juga bisa menggunakan quote untuk membedakan mana tulisan biasa dan mana source code. Pada artikel ini, saya akan memberikan cara membuat quote untuk teks tertentu, dan quote untuk source code. Langsung saja, tanpa berbasa-basi lagi, saya akan memberi tahu cara membuat quote, tentunya dengan tempilan yang menarik untuk sobat.
Untuk membuat quote, langsung saja tanpa berbasa-basi, tulis kode di bawah ini dimanapun sobat menginginkannya.
<blockquote>isi teks</blockquote>
Ganti tulisan
isi teks sesuai dengan keinginan sobat.
Untuk menuliskan kutipan pada posting blog, caranya pindah ke tampilan html pada bagian kiri atas. Atau jika ingin yang lebih cepat, sobat bisa langsung menekan tombol ini untuk membuat kutipan.
Cukup mudah kan untuk membuat kutipan?
Mungkin sobat akan melihat tampilan kutipan yang baru saja sobat buat masih kurang menarik.
Untuk membuat tampilan quote sobat menjadi lebih menarik, sobat dapat menggunakan kode css pada quote sobat. Dan pada artikel ini, saya akan memberikan 2 tampilan kutipan, yaitu yang pertama kutipan untuk source code, dan yang kedua kutipan untuk kalimat tertentu.
Quote untuk source code
blockquote{background-color:#eaeaea; border-radius:3px; border-left:5px solid #2288cc; padding:10px; margin:12px 5px; font-family:Monospace;}
Kode di atas adalah kode css. Sobat dapat meletakkan kode tersebut di mana saja, baik itu di template sobat, atau sebagai kode css untuk kutipan tertentu. Contoh tampilan quote tersebut adalah seperti ini
lorem ipsum dolor sit amet
Untuk source code, terutama html, sobat perlu melakukan parse terlebih dahulu sebelum menuliskannya, agar tidak terjadi error.
Quote untuk kalimat tertentu
blockquote{font-family:Verdana; background-color:#eeeeee; color:#2d2d2d; font-style:italic; margin:12px 5px; padding:10px; border-radius:3px;}
Contoh dari kode css tersebut, hampir sama seperti sebelumnya, hanya menghilangkan warna biru di sisi kiri, membuat tulisan bergaya italic atau miring dan mengganti font.
Lorem Ipsum Dolor Sit Amet
Sobat dapat mengganti sendiri tampilan quote sesuai keinginan sobat. Apabila sobat masih merasa bingung tentang cara Mengganti Tampilan Kutipan atau Quote Pada Blog, sobat dapat menanyakannya pada kolom komentar di bawah.
Related Posts