cara membuat efek blur pada gambar di blog dengan java script

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

Posted in: tips and trick,tips and trick bloging