Cara Membuat Efek Blur Pada Gambar di Blog

Pada postingan kali ini saya akan membahas bagaimana Cara Membuat Efek Blur Pada Gambar di Blog, Foto ataupun Banner yang ada di Blog.
Efek Blur akan terjadi apabila Cursor melintas pada Objek tersebut.
Efek ini berlaku untuk semua Objek gambar, baik itu Gambar yang disertai dengan link ataupun gambar yang tidak disertai dengan link.
Berikut cara memasangnya :

Login ke Blogger
Klik Rancangan → Edit HTML
Klik tulisan Download Template Lengkap
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
Beri tanda centang pada kotak di samping tulisan Expand Template Widget

Kemudian cari kode ]]></b:skin>
Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol Ctrl + F atau (F3)

Kemudian Copy kode dibawah ini dan Paste diatas nya

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

Jika sudah SIMPAN TEMPLATE

Berikut contoh penerapan :

Gambar biasa



Kode gambar

<a href="http://id-id.facebook.com/people/Maz-Imtikhan/100000207472417"><img border="0" src="http://i1002.photobucket.com/albums/af149/Imtikhan/Imtikhan_facebook-1.png"></a>

Gambar dengan efek blur dengan link



Kode gambar

<a href="http://id-id.facebook.com/people/Maz-Imtikhan/100000207472417" class="linkopacity"><img border="0" src="http://i1002.photobucket.com/albums/af149/Imtikhan/Imtikhan_facebook-1.png"></a>

Gambar dengan efek blur tanpa link



Kode gambar

<a href="#nogo" class="linkopacity"><img border="0" src="http://i1002.photobucket.com/albums/af149/Imtikhan/Imtikhan_facebook-1.png"></a>


Selamat mencoba