Blockquote Keren dengan CSS

perbesar (klik)

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 sedang membaca artikel tentang Blockquote Keren dengan CSS dan anda bisa menemukan artikel Blockquote Keren dengan CSS ini dengan url http://blogger-kerinci.blogspot.com/2011/12/blockquote-keren-dengan-css.html,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Blockquote Keren dengan CSS ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link Blockquote Keren dengan CSS sebagai sumbernya.