Modifikasi Tampilan Blockquote Menggunakan 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 bagian CSS nya saja.

Design Blockquote ini dikembangkan oleh teman-teman Template Creator dengan menambahkan background dan bumbu-bumbu lain agar lebih menarik untuk dilihat oleh pembaca.

Bumbu yang saya maksud disini berupa CSS Property yah teman-teman, jangan sampai salah mengartikan.

Modifikasi Tampilan Blockquote Menggunakan Stitched Style

Ohya.. Saya juga pernah melihat beberapa artikel yang menampilkan Blockquote unik didalam postingan blognya. Tapi ketika saya mencoba untuk menyisipkan blockquote didalam artikel saya, ternyata blockquote yang saya miliki di dalam template justru terlihat kurang menarik.

Contoh Blockquote Default

Sejak saat itu saya coba memberikan sedikit sentuhan untuk modifikasi Tampilan Blockquote menggunakan Stitched Style atau Gaya Jahitan atau lebih dikenal dengan Dash Line. Lihat contohnya dibawah ini.

Ini adalah Simple Blockquote yang biasa saya gunakan di beberapa artikel.

Menurut teman-teman, blockquote diatas terlihat lebih menarik gak sih ?

Kalau teman-teman mau mencoba memodifikasi blockquote yang keren seperti diatas, coba ikuti langkah-langkahnya dibawah ini yah.

Masuk ke dashboard blog dan buka tema, lalu pilih edit HTML
Cari dan hapus semua kode blockquote yang ada didalam tema kamu

Salin Kode CSS dibawah ini, dan letakkan sebelum kode <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 hasilnya pada artikel yang kamu sisipkan Blockquote

Teman-teman tidak mau Blockquote berwarna merah seperti yang saya gunakan? Teman-teman bisa mencari warna sesuai keinginan dengan merubah kode warna pada CSS diatas.

Ohya untuk teman-teman yang belum tahu cara menyisipkan Blockquote didalam artikel, kamu bisa menggunakan 2 metode dari editor didalam blog kamu yaitu menggunakan metode Compose atau HTML.

Untuk metode Compose, Teman-teman bisa lihat gambar dibawah ini yah.

tombol Blockquote

Sedangkan untuk Metode HTML, teman-teman hanya perlu menuliskan kode <blockquote>Text Blockquote disini</blockquote>. Sehingga teman-teman akan melihat hasil yang sama seperti contoh blockquote dibawah ini.

Text Blockquote disini

Mudah 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.