cara membuat gambar terlihat blur ketika di sorot

Setelah beberapa lama T3-Blogger tidak aktif karena saya lebih sering mengurus blog DiscoverBramasta, kali ini saya berniat untuk berbagi tutorial kembali dengan para blogger, yah tutorial kali ini sudah banyak tersebar di Internet, sehingga banyak orang tidak perlu mencarinya susah-susah.

Tutorial kali ini sudah pasti sesuai dengan judul artikel kali ini, yaitu membuat gambar menjadi blur (kabur) ketika disorot (di hover menggunakan mouse), bagi yang ingin mengetahui bagaimana hasilnya silahkan lihat di bagian sidebar blog DiscoverBramasta.

Tanpa perlu basa-basi lagi, ikuti langkah-langkah dibawah ini:

Login ke Blogger

Masuk ke "Design" > "Edit HTML"

Dengan menggunakan Ctrl + F atau bagaimanapun caranya, temukan kode ]]></b:skin>

Letakkan kode ini diatasnya:

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

Save Template

Jika anda ingin membuat gambar dengan efek blur ketika disorot, pakai kode ini

<a href="#" class="linkopacity"><img src="http://example.com/gambar.gif"></a>

Jika anda ingin membuat gambar dengan link + efek blur, cukup ganti tanda # pada kode diatas menjadi link yang anda inginkan.

jangan lupa komentarnya ya bro