Modifikasi Tampilan Blockquote Memakai Stitched Style
Blockquote mendefinisikan sebuah kutipan panjang yang ketika dilihat pada browser, maka teks akan tampil menjorok kedalam. Tampilan Blockquote yang ada didalam setiap postingan blog, secara default hanya memainkan margin pada bab CSS nya saja.
Design Blockquote ini dikembangkan oleh teman-teman Template Creator dengan menambahkan background dan bumbu-bumbu lain biar lebih menarik untuk dilihat oleh pembaca.
Bumbu yang aku maksud disini berupa CSS Property yah teman-teman, jangan hingga salah mengartikan.
Ohya.. Saya juga pernah melihat beberapa artikel yang menampilkan Blockquote unik didalam postingan blognya. Tapi ketika aku mencoba untuk menyisipkan blockquote didalam artikel saya, ternyata blockquote yang aku miliki di dalam template justru terlihat kurang menarik.
Sejak dikala itu aku coba memperlihatkan sedikit sentuhan untuk modifikasi Tampilan Blockquote memakai Stitched Style atau Gaya Jahitan atau lebih dikenal dengan Dash Line. Lihat misalnya dibawah ini.
Menurut teman-teman, blockquote diatas terlihat lebih menarik gak sih ?
Kalau teman-teman mau mencoba memodifikasi blockquote yang keren ibarat diatas, coba ikuti langkah-langkahnya dibawah ini yah.
Teman-teman tidak mau Blockquote berwarna merah ibarat yang aku gunakan? Teman-teman dapat mencari warna sesuai impian dengan merubah aba-aba warna pada CSS diatas.
Ohya untuk teman-teman yang belum tahu cara menyisipkan Blockquote didalam artikel, kau dapat memakai 2 metode dari editor didalam blog kau yaitu memakai metode Compose atau HTML.
Untuk metode Compose, Teman-teman dapat lihat gambar dibawah ini yah.
Sedangkan untuk Metode HTML, teman-teman hanya perlu menuliskan aba-aba <blockquote>Text Blockquote disini</blockquote>. Sehingga teman-teman akan melihat hasil yang sama ibarat pola blockquote dibawah ini.
Praktis bukan Mempraktekkan tutorial Modifikasi Tampilan Blockquote Menggunakan Stitched Style ini?
Kalau masih bingung, silahkan ditanyakan melalui kolom komentar dibawah ini yah teman-teman. Dan jangan lupa untuk berlangganan Gratis diblog ini supaya tidak ketinggalan tutorial menarik lainnya yah.
Design Blockquote ini dikembangkan oleh teman-teman Template Creator dengan menambahkan background dan bumbu-bumbu lain biar lebih menarik untuk dilihat oleh pembaca.
Bumbu yang aku maksud disini berupa CSS Property yah teman-teman, jangan hingga salah mengartikan.
Ohya.. Saya juga pernah melihat beberapa artikel yang menampilkan Blockquote unik didalam postingan blognya. Tapi ketika aku mencoba untuk menyisipkan blockquote didalam artikel saya, ternyata blockquote yang aku miliki di dalam template justru terlihat kurang menarik.
Sejak dikala itu aku coba memperlihatkan sedikit sentuhan untuk modifikasi Tampilan Blockquote memakai Stitched Style atau Gaya Jahitan atau lebih dikenal dengan Dash Line. Lihat misalnya dibawah ini.
Ini yaitu Simple Blockquote yang biasa aku gunakan di beberapa artikel.
Menurut teman-teman, blockquote diatas terlihat lebih menarik gak sih ?
Baca juga: Menyapa Pengunjung Menggunakan Widget Welcome Note
Kalau teman-teman mau mencoba memodifikasi blockquote yang keren ibarat diatas, coba ikuti langkah-langkahnya dibawah ini yah.
- Masuk ke dashboard blog dan buka tema, kemudian pilih edit HTML
- Cari dan hapus semua aba-aba blockquote yang ada didalam tema kamu
- Salin Kode CSS dibawah ini, dan letakkan sebelum aba-aba
<head>
blockquote { padding:10px; margin:10px 0; background:#FF0000; color:#fff; font-weight:bold; line-height:1.4em; border:2px dashed #fff; border-radius:3px; -webkit-box-shadow:0 0 0 4px #FF0000,2px 1px 6px 4px rgba(10,10,0,.5); box-shadow:0 0 0 4px #FF0000,2px 1px 6px 4px rgba(10,10,0,.5); font-weight:normal; } blockquote a{ font-weight:600; text-transform:capitalize; color:inherit; } blockquote ul{ list-style:none; } - Simpan Template dan lihat kesannya pada artikel yang kau sisipkan Blockquote
Teman-teman tidak mau Blockquote berwarna merah ibarat yang aku gunakan? Teman-teman dapat mencari warna sesuai impian dengan merubah aba-aba warna pada CSS diatas.
Ohya untuk teman-teman yang belum tahu cara menyisipkan Blockquote didalam artikel, kau dapat memakai 2 metode dari editor didalam blog kau yaitu memakai metode Compose atau HTML.
Untuk metode Compose, Teman-teman dapat lihat gambar dibawah ini yah.
Sedangkan untuk Metode HTML, teman-teman hanya perlu menuliskan aba-aba <blockquote>Text Blockquote disini</blockquote>. Sehingga teman-teman akan melihat hasil yang sama ibarat pola blockquote dibawah ini.
Text Blockquote disini
Praktis bukan Mempraktekkan tutorial Modifikasi Tampilan Blockquote Menggunakan Stitched Style ini?
Kalau masih bingung, silahkan ditanyakan melalui kolom komentar dibawah ini yah teman-teman. Dan jangan lupa untuk berlangganan Gratis diblog ini supaya tidak ketinggalan tutorial menarik lainnya yah.
Post a Comment for "Modifikasi Tampilan Blockquote Memakai Stitched Style"