Cara Membuat Blockquote Keren dengan Flat Design ala Kode 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.



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.

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:""}

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:""}

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:""}

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:""}

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:""}

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:""}

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:""}

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.