Cara Membuat Blockquote Keren dengan Flat Design - Style 1 ala Bang Jarwo

Blockquote atau sering disebut kotak kutipan adalah sebuah kotak khusus di dalam sebuah postingan dengan tujuan memudahkan pembaca untuk membedakan sesuatu. Biasanya saya menggunakan blockquote untuk tempat menaruh CSS, HTML, Javascript dan kata-kata khusus.

Secara default, blockquote berpenampilan mono, dan tidak menarik. Padahal, kita dapat mengeditnya sesuka hati hanya dengan CSS. Oleh karenanya, kali ini saya akan membagikan kode CSS style 1 untuk desain blockquote.

Tanpa basa basi lagi berikut keunggulan blockquote Bang Jarwo Style 1 ini:
  1. Sangat ringan
  2. Dipercantik dengan box-shadow
  3. Tidak menyebabkan masalah loading blog lambat seperti Leverage Browser Caching, Add Expires Header, dan lain lain
  4. Menggunakan warna flat design
  5. Pure 100% CSS
  6. Tersedia banyak warna yang bisa dipilih
  7. Responsif, tidak terpotong di tampilan mobile
  8. SEO Friendly
  9. Tanpa menggunakan font external tambahan

Cara Pemasangan


1. Penghapusan blockquote yang lama


Pertama, cari di blog anda kode yang mirip seperti ini:

blockquote   atau   blockquote::

Hapus kode tersebut bersama isinya. Bila ada kode yang mirip dengan kode diatas, (sama-sama mengandung kata blockquote) maka hapus saja.

Tetapi bila di blog anda tidak ada kode itu, lewatkan saja langkah ini.

2. Pemilihan warna blockquote


Silahkan anda pilih salah satu dari beberapa warna yang tersedia pada gambar dibawah ini.

Cara Membuat Blockquote Keren dengan Flat Design - Style 1 ala Bang Jarwo


Setelah anda mendapatkan warna yang diinginkan, copy kode dibawah ini sesuai dengan warna yang anda pilih. Contoh, Bila anda memilih warna merah, maka copy kode yang dibawah judul BQ merah, bukan yang lainnya. Dan begitu seterusnya dengan warna lainnya.

Bila anda sudah mencopynya, silahkan lanjut ke langkah ke-3.

BQ Hitam
blockquote{display:block;background:#222;padding:15px 20px 15px 45px;margin:0 0 20px;position:relative;font-family:Georgia,serif;font-size:16px;line-height:1.2;color:#eee;border-left:15px solid #333;-moz-box-shadow:2px 2px 15px #ccc;-webkit-box-shadow:2px 2px 15px #ccc;box-shadow:2px 2px 15px #ccc}
blockquote::before{content:"\201C";font-family:Georgia,serif;font-size:60px;font-weight:700;color:#999;position:absolute;left:10px;top:5px}
blockquote::after{content:""}

BQ Abu-abu
blockquote{display:block;background:#bfbfbf;padding:15px 20px 15px 45px;margin:0 0 20px;position:relative;font-family:Georgia,serif;font-size:16px;line-height:1.2;color:#161616;border-left:15px solid #333;-moz-box-shadow:2px 2px 15px #ccc;-webkit-box-shadow:2px 2px 15px #ccc;box-shadow:2px 2px 15px #ccc}
blockquote::before{content:"\201C";font-family:Georgia,serif;font-size:60px;font-weight:700;color:#5a5a5a;position:absolute;left:10px;top:5px}
blockquote::after{content:""}

BQ Merah
blockquote{display:block;background:#E74C3C;padding:15px 20px 15px 45px;margin:0 0 20px;position:relative;font-family:Georgia,serif;font-size:16px;line-height:1.2;color:#161616;border-left:15px solid #A22F23;-moz-box-shadow:2px 2px 15px #ccc;-webkit-box-shadow:2px 2px 15px #ccc;box-shadow:2px 2px 15px #ccc}
blockquote::before{content:"\201C";font-family:Georgia,serif;font-size:60px;font-weight:700;color:#C0392B;position:absolute;left:10px;top:5px}
blockquote::after{content:""}

BQ Orange
blockquote{display:block;background:#E67E22;padding:15px 20px 15px 45px;margin:0 0 20px;position:relative;font-family:Georgia,serif;font-size:16px;line-height:1.2;color:#161616;border-left:15px solid #A84300;-moz-box-shadow:2px 2px 15px #ccc;-webkit-box-shadow:2px 2px 15px #ccc;box-shadow:2px 2px 15px #ccc}
blockquote::before{content:"\201C";font-family:Georgia,serif;font-size:60px;font-weight:700;color:#D35400;position:absolute;left:10px;top:5px}
blockquote::after{content:""}

BQ Kuning
blockquote{display:block;background:#FFCD02;padding:15px 20px 15px 45px;margin:0 0 20px;position:relative;font-family:Georgia,serif;font-size:16px;line-height:1.2;color:#161616;border-left:15px solid #E09300;-moz-box-shadow:2px 2px 15px #ccc;-webkit-box-shadow:2px 2px 15px #ccc;box-shadow:2px 2px 15px #ccc}
blockquote::before{content:"\201C";font-family:Georgia,serif;font-size:60px;font-weight:700;color:#FFA800;position:absolute;left:10px;top:5px}
blockquote::after{content:""}

BQ Hijau
blockquote{display:block;background:#2ECC71;padding:15px 20px 15px 45px;margin:0 0 20px;position:relative;font-family:Georgia,serif;font-size:16px;line-height:1.2;color:#161616;border-left:15px solid #1D8649;-moz-box-shadow:2px 2px 15px #ccc;-webkit-box-shadow:2px 2px 15px #ccc;box-shadow:2px 2px 15px #ccc}
blockquote::before{content:"\201C";font-family:Georgia,serif;font-size:60px;font-weight:700;color:#27AE60;position:absolute;left:10px;top:5px}
blockquote::after{content:""}

BQ Biru Muda
blockquote{display:block;background:#3498DB;padding:15px 20px 15px 45px;margin:0 0 20px;position:relative;font-family:Georgia,serif;font-size:16px;line-height:1.2;color:#161616;border-left:15px solid #236B9B;-moz-box-shadow:2px 2px 15px #ccc;-webkit-box-shadow:2px 2px 15px #ccc;box-shadow:2px 2px 15px #ccc}
blockquote::before{content:"\201C";font-family:Georgia,serif;font-size:60px;font-weight:700;color:#2980B9;position:absolute;left:10px;top:5px}
blockquote::after{content:""}

BQ Biru Tua
blockquote{display:block;background:#5065A1;padding:15px 20px 15px 45px;margin:0 0 20px;position:relative;font-family:Georgia,serif;font-size:16px;line-height:1.2;color:#eee;border-left:15px solid #2E3E69;-moz-box-shadow:2px 2px 15px #ccc;-webkit-box-shadow:2px 2px 15px #ccc;box-shadow:2px 2px 15px #ccc}
blockquote::before{content:"\201C";font-family:Georgia,serif;font-size:60px;font-weight:700;color:#394C81;position:absolute;left:10px;top:5px}
blockquote::after{content:""}

3. Pemasangan CSS


Cari kode </b:skin> atau </style>, lalu masukkan kode yang telah anda copy tadi tepat diatasnya. Lalu simpan template anda. Sekarang silahkan cek blockquote anda.

Bila anda menemukan kesalahan warna dalam CSS atau CSS error, silahkan berkomentar dibawah ini agar saya perbaiki.

Juga, saya juga menerima request dari anda untuk warna lainnya, dengan cara berkomentar dibawah ini dengan warna yang anda inginkan, dan centang kotak Notify Me agar bila request anda sudah saya buat, saya bisa menghubungi anda.

11 komentar untuk artikel ini. Ingin berkomentar?

Silakan masukkan komentar anda. Jangan habiskan waktu hanya untuk melakukan SPAM disini.

Emoticon Emoticon

Perlihatkan Semua Komentar Tutup Semua Komentar
.

Wihihi.. Kalau saya mah pakai block quote yang biasa mas. Yang pernah Mas Jarwo aja kan itu ? masih ingat gak ?

Balas Hapus
.

Maksudnya * Yang Pernah Mas Jarwo ajar kan itu ?

Sorry Typo Mas :'v

Balas Hapus
.

Ini mas jarwo buat sendiri? Hebat. Saya jadikan sbg referensi dulu deh... masih betah pakai blockquote bawaan :D Tapi kedepannya saya pake nih bagus.

Balas Hapus
.

Hishh... tambah style lah gan.. Itu mah warnanya aja yg beda. Hiks!

Balas Hapus
.

Siap gan nanti saya luncurkan style 2 nya...

Balas Hapus
.

Iya dong... Ingat :D

Balas Hapus
.

Bagus ya... ntar mau coba juga ah...

Balas Hapus
.

Wah tq gan. Informasiny, kayaknya beta aye disini.

Hasan or fb

Balas Hapus
.

Silahkan dicoba bunda :)

Balas Hapus