Membuat Efek Image Fade Pada Blog Dengan Jquery

Efek Image Fade merupakan sebuah efek yang membuat gambar pada blog menjadi transparan ketika tidak tersentuh kursor dan menjadi terlihat jelas ketika tersentuh kursor atau sebaliknya. Efek ini akan bekerja pada seluruh file gambar yang ada di setiap bagian blog, jadi seluruh gambar akan secara otomatis mendapatkan efek fade ini, dengan dukungan jquery, sehingga efek fade akan terlihat lebih menarik, sebagai contoh blog ini.

Untuk memasangnya ikuti langkah-langkah berikut :

• Log In ke Blogger.
• Pilih Rancangan, Edit Html, centang Expand Widget Template.
• Cari kode tag </head>, dan masukan script berikut di atasnya :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;img&#39;).fadeTo(&#39;medium&#39;, 0.5);
$(&#39;img&#39;).hover(function() {
$(this).fadeTo(&#39;medium&#39;, 1.0);
}, function() {
$(this).fadeTo(&#39;medium&#39;, 0.5);
});
});
</script>

• Jika dalam template, telah terdapat file jquery 1.5.2 (teks warna merah), maka script warna merah tidak perlu di pasang kembali.
• Simpan Template.

Pengaturan :
Teks warna hijau, merupakan tingkat transparansi gambar sebelum dan setelah tersentuh kursor.
Teks warna biru, merupakan tingkat transparansi gambar saat tersentuh kursor.

Selamat Mencoba.