Selamat Datang di http://nthoeng.blogspot.com, Terima Kasih Sudah Berkunjung, Jangan Lupa Tinggalkan komentar. | Selamat Datang di http://nthoeng.blogspot.com, Terima Kasih Sudah Berkunjung, Jangan Lupa Tinggalkan komentar. |

Sabtu, 24 Maret 2012

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.

4komentar:

Sundulmengatakan...

tips yang bagus ...
Salam sukses selalu Sobat

Galihmengatakan...

Thankz Soob !!

Abbymengatakan...

nice

wiwin_smartenant oeymengatakan...

bermanfaat banget nih,, smuanya sukses aku pake..
hehehe mkasih yakk..
btw sering2 post ttg blog lagi dong ;D

Posting Komentar

TwitterDeliciousFacebookDiggStumbleuponFavoritesMore