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 Cara Membuat Blockquote Keren dengan Flat Design - Style 1 ala Bang Jarwo

avatar
Balas Hapus

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

avatar
Balas Hapus

Maksudnya * Yang Pernah Mas Jarwo ajar kan itu ?

Sorry Typo Mas :'v

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

avatar
Balas Hapus

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

avatar
Balas Hapus

Siap gan nanti saya luncurkan style 2 nya...

avatar
Balas Hapus

Iya dong... Ingat :D

avatar
Balas Hapus

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

avatar
Balas Hapus

Wah tq gan. Informasiny, kayaknya beta aye disini.

Hasan or fb

avatar
Balas Hapus

Silahkan dicoba bunda :)