Efek Hover Pada Semua Gambar

Akhir akhir ini lebih sering posting artikel nih. hehehehe.... Padahal sekarang, lagi banyak masalah dengan yang namanya KBK. Udah dimarahin sama temen-temen, suruh ini, suruh itu. wah, pokoknya ribet banget. Tp, untuk yang urusan satu ini, aku tetep rutin. Yaitu: Posting. heheheh....

Yak, kita mulai aja sekarang materi kita. Yaitu tentang blog tutorial lagi. Emang gak bakal habis kayaknya.

Postingan hari ini, akan terfokus pada yang namanya efek gambar. Yaitu efek, jika kita arahkan pointer kita pada gambar tersebut, gambar akan buram (terhover). untuk lebih paham: coba lihat gambar berikut:


Sebenarnya, banyak tutorial tentang efek ini. Tapi, kebanyakan dengan cara manual, yaitu dengan menambahkan kode di alamat gambar. Sehingga sangat tidak efisien sekali. Apalagi untuk anda yang sangat tidak sabaran. heheheh....
Jadi tips yang berjudul Efek Hover Pada Semua Gambar ini tentu sangat berguna, mari kita praktekan.

1. login ke blogger
2. Masuk ke Tata Letak
3. Pilih menu Edit HTML
4. Centang Expand Template Widget
5. Cari kode ]]></b:skin>
6. letakan kode di bawah ini, di atas ]]></b:skin>

.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}

7. Simpan Template, dan lihatlah hasilnya.
Gimana?? bagus kan???