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:
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
- 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 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>
- Lalu Simpan
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(){
$(".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>
- Klik Simpan, dan selesai :-)
