Membuat Efek Blur Gambar Otomatis

Menampilkan efek blur pada gambar bisa dengan cara manual dan bisa dengan cara otomatis. Cara manual maksudnya, untuk menampilkan efek blur (hover) tersebut kita harus menambahkan sedikit script dalam proses pemostingan dengan bantuan URL gambar tersebut. Sedangkan dengan cara otomatis maksudnya untuk menampilkan efek blurnya kita hanya mengedit HTML template kita.

Nah disini ane pake cara kedua (otomatis) biar tiap mostinga gambar gk perlu repot-repot ngedit lagi. contohnya bisa dilihat di blog ini, sekalipun tidak begitu menarik sih yang penting ada sedikit animasi.. hehehe

Klo sobat mau, caranya cukup mudah :

1. Login ke Blogger dengan ID sobat

2. Pilih menu Template --> Edit HTML

3. cari kode ]]></b:skin> lalu copy dan pastekan kode berikut tepat dibawahnya :

<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>
<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>

4. Simpan template, lalu lihat hasilnya.

Sekian tutorial untuk ini,

Salam.