Blockquote Keren dengan CSS

Pada kesempatan kali ini taukahbahwa.blogspot.com akan menyajikan posting tentang Blockquote Keren dengan CSS. Semoga dengan posting Blockquote Keren dengan CSS akan menambah pengetahuan bagi anda pembaca setia taukahbahwa.blogspot.com

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 :)

Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com

Homepage|http://taukahbahwa.blogspot.com