Memberi Efek Blur pada Gambar dengan Java Script

Sebelumnya saya berterima kasih pada Ka' Damar dengan postingannya tentang "Membuat Animasi Gambar saat Disorot dengan Mouse", keep update ya sobat. Dulu saya pernah memberikan postingan tentang "Memberi efek blur pada gambar", terus apa bedanya dengan postingan ini? Perbedaanya adalah postingan efek blur yang terdahulu adalah menggunakan CSS, sedangkan efek blur kali ini menggunakan java script. Satu lagi perbedaannya, yaitu efek blur yang dihasilkan pada gambar lebih lembut dan halus dari pada dengan cara terdahulu.

Efek blur membuat gambar yang disorot dengan mouse menjadi blur atau transparan, kemudian apabila pointer mouse sudah lewat maka gambar akan kembali seperti semula. Mana contohnya mas? Dicoba dulu ntar juga tahu hehe atau lihat efek blur di blog ini, kalau masih ada lho. Kita dapat memilih memberi efek blur pada gambar tertentu pada postingan atau secara otomatis semua gambar di blog kita akan diberi efek blur, caranya akan saya jelaskan nanti. Langsung saja, cara membuat efek blur pada gambar di blog dengan java script adalah sebagai berikut:

• Silakan sobat login ke blogger
• Maka sobat akan masuk ke halaman yang disebut Dasbor, klik Rancangan
• Klik pada tab Edit HTML
• Letakkan kode dibawah ini setelah kode ]]></b:skin>

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

• Lalu Simpan

Nah, sekarang kita dapat memilih memberi efek blur pada gambar tertentu pada postingan atau memberi efek blur pada semua gambar di blog kita secara otomatis. Kalo saya lebih memilih memberi efek blur pada semua gambar secara otomatis, supaya mudah dan enggak repot.

Memberi Efek Blur pada Gambar Tertentu pada Postingan
Caranya adalah sebagai berikut:

• Sisipkan kode class="efekanimasi" pada kode html gambar yang akan kita beri efek blur, contohnya

Kode html gambar biasa:

<a href="http://forantum.blogspot.com" target="_blank" title="Forantum I Blogging is My Life I Tutorial Blog I Tips dan Trik Blog I SEO I Free Template" ><img alt="Forantum I Blogging is My Life I Tutorial Blog I Tips dan Trik Blog I SEO I Free Template" src="http://img52.imageshack.us/img52/6594/forantumbanner3.gif" /></a>

Kode html gambar yang diberi efek blur:

<a href="http://forantum.blogspot.com" target="_blank" title="Forantum I Blogging is My Life I Tutorial Blog I Tips dan Trik Blog I SEO I Free Template" ><img alt="Forantum I Blogging is My Life I Tutorial Blog I Tips dan Trik Blog I SEO I Free Template" src="http://img52.imageshack.us/img52/6594/forantumbanner3.gif" class="efekanimasi"/></a>

Memberi Efek Blur pada Semua Gambar di Blog Kita Secara Otomatis
Caranya adalah sebagai berikut:

• Silakan masuk ke menu Rancangan dan pilih Edit HTML lagi
• Letakkan kode dibawah ini setelah kode ]]></b:skin> atau letakkan dibawah kode HTML yang telah kita masukkan sebelumnya.

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

• Klik Simpan, dan selesai :-)