Efek Bayangan dan Border Pada Foto Postingan

- Sebelumnya maaf jika sobat yang mencoba trik ini kurang puas karena saya juga bukan seorang blogger yang profesional. Kali ini saya akan berikan CSS border lengkung pada background gambar dipostingan kamu dan efek bayangan di bawahnya. Namun efek bayangan ini hanya bisa sempurna digunakan apabila gambar kamu ada dibagian tengah pada postingan kamu. Jadi semisal kamu menaruh dibagian kiri atau kanan efek bayangan ini tidak akan bekerja sempurna so saran saya selalu taruh tengah gambar yang kamu postingkan.

Cara memberi border dan efek bayangan


.post-body img{ background: #fff; -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; -webkit-box-shadow:0px 5px 9px -5px #333333;-moz-box-shadow:0px 5px 9px -5px #333333;-o-box-shadow:0px 5px 9px -5px #333333;-ms-box-shadow:0px 5px 9px -5px #333333;box-shadow:0px 5px 9px -5px #333333;-webkit-box-shadow: 0px 5px 9px -5px #333333;-moz-box-shadow: 0px 5px 9px -5px #333333;}
.post-body .separator {display: block;background: url(http://2.bp.blogspot.com/-zst4W_gLpis/T4KpPxScayI/AAAAAAAABPU/0jQVG6fNYsM/s1600/shadow.png) center bottom no-repeat;margin: 0;padding: 5px 0 25px 0;}

Letakkan kode CSS diatas sebelum kode penutup CSS template kamu dan bagi yang belum ngerti kode penutup CSS template. Cari aja kode seperti berikut ]]></b:skin> dan letakkan tepat diatas kode tersebut. Coba Lihat dulu Hasil kerja kita kali ini :



Catatan : Selalu letakkan gambar dibagian tengah atau "center"
Terima Kasih

Related Posts:

Disqus Comments
© 2017 Obachti 95 - Template Created by goomsite - Proudly powered by Blogger