Monday, February 13, 2012

Efek Gelap Terang pada Gambar

Pada saat blogger menulis suatu artikel, biasanya tidak terlepas dari image sebagai pelengkap artikel yang bertujuan untuk memberikan keterangan/penjelasan artikel atau sebagai pelengkap. Sebenarnya gambar/image pada postingan bisa diberikan sedikit efek tambahan untuk mempercantik tampilannya dengan memanfaatkan efek hover. Saat mouse pointer berada pada gambar maka akan terlihat suatu perubahan dimana gambar yang awalnya terlihat terang akan berubah menjadi gelap. Bagi sobat yang mau mencoba silahkan ikuti tips sederhana berikut ini.

1. Login ke blogger
2. Pilih rancangan, edit HTML
3. Centang expand template widget
4. Tekan Crtl-F dan cari kode ]]></b:skin>
5. Copy paste kode dibawah ini dan letakkan diatas kode ]]></b:skin>  tadi


Kode css terang menjadi gelap:
.post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}
.post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}

Kalau sobat mau merubah efek tersebut dari gelap menjadi terang, sobat tinggal membalikkan penempatan kodenya saja seperti di bawah ini:

Kode css gelap menjadi terang:
.post img{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}
.post img:hover{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}

6. Simpan dan coba jalankan untuk melihat hasilnya

Demikian tips sederhana untuk memberikan efek terang/gelap pada image postingan, semoga berguna dan bisa memberikan nuansa indah pada image postingan sobat

....:::Selamat mencoba dan semoga berhasil:::....

0 komentar:

Post a Comment

Luangkanlah waktu untuk berkomentar di blog ini. Berkomentarlah secara bijak( jangan SPAM). Komentar anda adalah suatu kebanggaan buat saya.