Blockquote Keren dengan CSS

Blockqoute adalah kutipan yang berada pada suatu blok atau area tertentu, dengan adanya blockqoute ini sangat membantu pengunjung dalam membaca artikel kita, apalagi jika sobat memposting artikel terntang code-code atau script tertentu.
Jadi kali ini saya akan share cara membuat blockquote yang lebih keren. Contohnya bisa sobat liat diblog gw ini atau liat gambar disamping :)

Untuk membuat blockquote tersebut kita harus mengedit sedikit kode CSS blog sobat. Ok..

1. Masuk ke Rancangan >> Edit HTML
2. Kemudian cari Kode blockquote atau .post blockquote (tergantung CSS pada blog sobat
3. Hapus kode tersebut beserta elemen-elemennya.
4. Ganti dengan kode dibawah :

blockquote {
background: #EEE ;
width: 400px;
padding: 5px;
margin: 5px;
width: 400px;
overflow:auto;
max-height:250px;
-webkit-box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
-moz-box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
}

 Simpan, dan liat hasilnya pada postingan blog sobat yang telah terpasang blockquote :)

Anda baru saja membaca artikel yang berkategori Blogger dengan judul Blockquote Keren dengan CSS. Anda bisa bookmark halaman ini dengan URL https://willy-maulana.blogspot.com/2012/12/blockquote-keren-dengan-css.html. Terima kasih!

Ditulis oleh: ws -