Membuat Image / Gambar Terlihat Blur ( Tersamar ) Ketika Disorot Mouse
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> :
5. Save Template
6. Siapkan Gambar yang telah diberi link ke suatu tempat (dalam bentuk kode HTML)
ini cuma contohnya :
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 :
Untuk melihat hasilnya bisa Anda lihat di bawah ini, coba arahkan mouse ke image dan klik :
Gmn sob, Bisa kan ? Selamat mencoba y ...
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://i415.photobucket.com/albums/pp237/jupmerput/honden5.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://i415.photobucket.com/albums/pp237/jupmerput/honden5.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 ...
