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 :
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$('img').fadeTo('medium', 0.5);
$('img').hover(function() {
$(this).fadeTo('medium', 1.0);
}, function() {
$(this).fadeTo('medium', 0.5);
});
});
</script>
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.
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() {
$('img').fadeTo('medium', 0.5);
$('img').hover(function() {
$(this).fadeTo('medium', 1.0);
}, function() {
$(this).fadeTo('medium', 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.
Membuat Efek Image Fade Pada Blog Dengan Jquery




0 komentar:
Posting Komentar