MASIGNCLEAN101

Modifikasi Tampilan Blockquote Memakai Stitched Style


Agustus 21, 2017
Modifikasi Tampilan Blockquote Memakai Stitched Style
Senin, 21 Agustus 2017
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.

Blockquote mendefinisikan sebuah kutipan panjang yang ketika dilihat pada browser Modifikasi Tampilan Blockquote Menggunakan Stitched Style
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.

Blockquote mendefinisikan sebuah kutipan panjang yang ketika dilihat pada browser Modifikasi Tampilan Blockquote Menggunakan Stitched Style
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.
Blockquote mendefinisikan sebuah kutipan panjang yang ketika dilihat pada browser Modifikasi Tampilan Blockquote Menggunakan Stitched Style
  1. Masuk ke dashboard blog dan buka tema, kemudian pilih edit HTML
  2. Cari dan hapus semua aba-aba blockquote yang ada didalam tema kamu
  3. 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; }
  4. 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.

Blockquote mendefinisikan sebuah kutipan panjang yang ketika dilihat pada browser Modifikasi Tampilan Blockquote Menggunakan Stitched Style

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.
Share This :