Memberi Efek Blur pada Gambar dengan Java Script

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

18 komentar:

  1. Lengkap bener Sob ^^

    mampir

    BalasHapus
  2. Saat mulai tertarik dengan word press, ternyata blog ini mengupas habis tentang blogspot,, dan kebetulan saya masih punya blog yang di blogspot, jadi saya akan praktekkan, dan sebagian yang ada di blog ini sudah saya praktekkan, terima kasih infonya,,,,

    BalasHapus
  3. Save dulu sahabat..info yang menarik.

    BalasHapus
  4. Wah gan..
    jadi cantik blof saya.
    thx gan infonya.
    saya follow d no urut 587.
    saya tunggu kunjungan dan follow baliknya ya gan.

    BalasHapus
  5. oya gan,,,
    kalo buat efek gambar berbayang seperti di air?

    BalasHapus
  6. kagak bisa w coba gan ???
    kunjungi blog ane ya ??
    jurang007.co.cc

    BalasHapus
  7. kebetulan nich saya baru permulaan blog,,
    thanks atas infonya..!!

    BalasHapus
  8. saya coba ya,kali aja bisa mempercantik blog saya,,,

    BalasHapus
  9. wahh keren juga ya hasilnya...
    makasih ya...

    BalasHapus
  10. Dah saya coba mas hasilnya bagus

    BalasHapus
  11. makasih banyak triknya sob,, sangat membantu

    BalasHapus

Mau tukeran link? silakan buka Link Sahabat dan apabila ada pertanyaan silakan tulis di Kotak Pertanyaan. Terima Kasih...

Kami akan menghapus komentar yang: Tak sopan, memakai HURUF BESAR, berupa caci maki, mengandung kata-kata kebun binatang, debat kusir, provokasi, di luar konteks, berupa undangan/ reklame. Komentar yang terlalu panjang, tanpa paragraf dan sulit dipahami. Komentar copy-paste, silakan di-link saja.

Isi komentar adalah tanggung jawab penulis komentar, bukan tanggung jawab pengelola blog/situs ini. Harap maklum.