Sebelumnya saya pernah membahas tentang Menambahkan Effect Shadow pada Link, dan kali ini effect shadow ini bisa ditambahkan pada blockquote agar tampilan blog kita semakin cantik. Silahkan buka terlebih dahulu file CSS di blog sobat atapun dari hostingan, bagi yang menggunakan wordpress bisa membuka Dashboard – Appearance – Editor – dan buka file style.css sesuai dengan tema yang digunakan.
Mempercantik Tampilan Blockquote dgn Menambahkan Bayangan
Untuk mulai mempercantik tampilan blockquote ini, bukalah style.css sesuai theme Anda dan carilah kode asli blockquote, kemudian ganti kode (atau tambahkan) kode tersebut dengan kode di bawah ini:
blockquote{width: 90%;background:#FFF; padding:5px 15px; margin:5px; color:#555; border:1px solid #C1C1AE; line-height:150%; font-size:12px;border: 1px solid #eee;
-webkit-box-shadow: 8px 8px 16px 4px rgba(0,0,0, 0.4);
-moz-box-shadow: 8px 8px 16px 4px rgba(0,0,0, 0.4);
box-shadow: 8px 8px 16px 4px rgba(0,0,0, 0.4);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;}
Setelah selesai jangan lupa save dan cobalah buka salah satu postingan sobat yang menggunakan blockquote. Secara default seharusnya tampilannya persis seperti blockquote di atas. Namun hal yang mesti menjadi perhatian juga adalah kesesuaian tampilan dengan tema yang digunakan. Sobat bisa melakukan penyesuaian dan merubah beberapa parameter yang digunakan seperti:
width: 90% (untuk lebar blockquote pada post entry)
background: #FFF (untuk warna background)
padding: 5px 15px; (untuk jarak letak text dalam blockquote)
margin: 5px; (untuk jarak blockquote dari luar post entry)
color: #555; (warna text)
line-height: 150% (spasi text {vertical})
border: 1px solid #111 (border lingkaran blockquote)
Ok deh, segitu aja dulu mudah-mudahan bermanfaat. Untuk optimasi blog melalui modifikasi css guna mengurangi http request silahkan simak juga optimasi wordpress dengan mengurangi http request dan cara membuat dan menggunakan CSS Sprite.
