Wednesday, January 10, 2018

Modifikasi Tampilan Blockquote Menggunakan Stitched Style

Chat on Whatsapp

WarnetQQ Situs Poker Online Terpercaya Domino99 Online

Situs Poker Online Terpercaya SBCC
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 ?

Baca juga: Menyapa Pengunjung Menggunakan Widget Welcome Note


Kalau teman-teman mau mencoba memodifikasi blockquote yang keren seperti diatas, coba ikuti langkah-langkahnya dibawah ini yah.
Tanda Blockquote
  1. Masuk ke dashboard blog dan buka tema, lalu pilih edit HTML
  2. Cari dan hapus semua kode blockquote yang ada didalam tema kamu
  3. 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;
    }
  4. 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.


Previous
Next Post »
BLOGGER
DISQUS

2 comments

design blockquotenya memang keren, ijin nyoba dulu mas...

Balas