Cara Membuat Efek Bayangan Pada Gambar di Blog

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Kali ini Saya akan membahas Cara Membuat Efek Bayangan Pada Gambar di Blog.
Gambar standar pada blog sangat biasa dan tidak ada kesan istimewa agar pengunjung blog betah dan tahan lama mengunjungi blog kita. Untuk itu perlu perubahan sedikit pada gambar di blog agar berbeda dengan blog lain orang lain. Lalu bagaimana cara membuat bayangan pada gambar tersebut ? Perhatikan cara di bawah ini dan ikuti.

Cara membuatnya:

• Login ke blogger.com, jika sudah,
• Cari kode .post-body img { agar mudah mencari tekan f3
• Letakkan script di bawah ini setelah .post-body img {

-webkit-box-shadow:4px 2px 7px #000;
-moz-box-shadow: 4px 2px 7px #000;
box-shadow : 4px 2px 7px #000;

• Simpan dan lihat hasilnya

Efek bayang ini akan lebih hidup jika diterapkan pada gambar dalam keadaan mouse over (mouse menyentuh gambar). Jadi dalam keadaan normal tidak terlihat efek bayangan sedangkan pada saat mouse didekatkan pada gambar bisa terlihat efeknya. Berikut cara membuat mouse overnya.

Berikut caranya:

• Login ke blogger.com, jika sudah,
• Pilih Template → Edit HTML → Expand Template Widget
• Cari kode ]]></b:skin> agar mudah mencari tekan f3
• Letakkan script di bawah ini, di atas ]]></b:skin>

.post-body img:hover{
-webkit-box-shadow:4px 2px 7px #000;
-moz-box-shadow: 4px 2px 7px #000;
box-shadow : 4px 2px 7px #000;} 4. terakhir save

Itulah sedikit tutorial Cara Membuat Efek Bayangan Pada Gambar di Blog. Semoga bermanfaat untuk kalian.