Cara Membuat Efek Blur pada Gambar dengan JavaScript

Efek blur adalah membuat gambar yang disorot dengan mouse menjadi blur atau transparan, kemudian apabila pointer mouse sudah lewat maka gambar akan kembali seperti semula. Sangat menarik bukan?. Mungkin sobat tbelum mengerti akan maksud dari artikel ini. Nah untuk itu sobat blogger harus mencobanya.
Oke kita lansung saja Membuat Efek Blur pada Gambar.

1. Login ke blogger dengan akun sobat
2. Pilih Rancangan
3. Kemudian pilih Edit HTML
4. Cari kode ini ]]></b:skin> dan letakkan kode berikut diBawah kode ]]></b:skin>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".efekanimasi").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".efekanimasi").hover(function(){
$(this).fadeTo("slow", 0.6); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>

5. Lalu Simpan Template
Nah sekarang kita dapat memilih untuk membuat efek blur pada gambar tertentu pada postingan. Kita juga dapat membuat efek blur pada semua gambar yang terdapat pada blog.
Sekarang tinggan piliha nada.

Cara Membuat Efek Blur pada Gambar Tertentu Pada Postingan.
Caranya adalah:
Tinggal menyisipkan kode class="efekanimasi" pada gambar yang akan kita beri efek Blur.
Contoh kode gambar Biasa:

<a href="http://kelolablog.blogspot.com" target="_blank">
<img border="0" width="300" title="TIPS dan TRIK BLOG" src="http://i764.photobucket.com/albums/xx289/kartajaya/12.gif" height="43"/></a>

Kode Gambar yang diberi efek Blur:

<a href="http://kelolablog.blogspot.com" target="_blank">
<img border="0" width="300" title="TIPS dan TRIK BLOG" src="http://i764.photobucket.com/albums/xx289/kartajaya/12.gif"class="efekanimasi" height="43"/></a>

Memberi Efek Blur pada Semua Gambar yang Terdapat pada Blog Secara Otomatis.
Caranya adalah:
1. Silahkan masuk ke Menu Rancangan, dan pilih Edit HTML lagi
2. Letakkan kode berikut di bawah kode ]]></b:skin> atau di bawah kode yang sudah kita letakkan tadi.

<script type='text/javascript'>
$(document).ready(function(){
$(".post img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".post img").hover(function(){
$(this).fadeTo("slow", 0.6); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>

3. Klik Simpan Template dan selesai

Semoga bermanfaat.