Membuat Image / Gambar Terlihat Blur ( Tersamar ) Ketika Disorot Mouse

Anda langsung bisa melihat contohnya pada blog ini, coba arahlan mouse ke banner sponsor di side blog ini, banner akan terlhat samar ketika mouse menyorotnya. Nah kali ini aku akan menulis cara membuatnya, memang banyak sekali trik dan tips blog yang berguna untuk menarik para pengunjung blog agar berlama2 di blog itu, salah satunya adalah ini.

OK cara buatnya :
1. Login ke Blogger
2. Masuk ke TATA LETAK --> EDIT HTML
3. Anda cari kode ]]></b:skin>
4. Letakkan kode di bawah ini di atas ]]></b:skin> :

.linkopacity img {filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; border:0;}
.linkopacity:hover img {filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.3;border:0;}

5. Save Template
6. Siapkan Gambar yang telah diberi link ke suatu tempat (dalam bentuk kode HTML)
ini cuma contohnya :

<img src="http://i859.photobucket.com/albums/ab160/seby_antoe/1komisisuper125x125px5dtk.gif"></a>

maka akan terlihat seperti di bawah ini :

Nah jika rekan2 ingin menerapkan Effect ini, tambahkan kode berikut ini : <a href="#nogo" class="linkopacity"> di depan kode image, yang akan menjadi seperti ini :

<a href="#nogo" class="linkopacity"><img src="http://i859.photobucket.com/albums/ab160/seby_antoe/1komisisuper125x125px5dtk.gif"></a>

Untuk melihat hasilnya bisa Anda lihat di bawah ini, coba arahkan mouse ke image dan klik :

Gmn sob, Bisa kan ? Selamat mencoba y ...