Membuat Gambar Menjadi Blur Ketika Disorot mouse

Mungkin akan biasa-biasa saja jika pengunjung meletakkan pointer mouse-nya di salah satu gambar pada blog kita tidak terjadi effek apa saja. Sebaliknya, pengunjung mungkin akan menjadi tertarik untuk meng-klik gambar pada blog kita (misalnya banner iklan) apabila ketika gambar tersebut disorot dengan mouse, timbul effek semisal 'blur' atau 'samar-samar'. Wahh . . . .asik itu, itung-itung sambil optimalkan iklan . . . . hi...hi


OK cara buatnya :
1. Login ke Blogger
2. Masuk ke TATA LETAK --> EDIT HTML
3. Sobat 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)
misalnya seperti ini,


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

 

Untuk menambahkan effek blur-nya, tinggal menambahkan kode berikut,

 <a href="#nogo" class="linkopacity">

Letakkan kode di atas di depan kode gambar Sobat,

Nah, seperti ini :

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

Previewnya kayak gini lho . . . .arahkan pointer Sobat ke gambar dan klik

O ya, jika ingin dapat Dollar hanya dengan sekali daftar, Di Sini nih