jQuery Image Hover Fade Effect

Bismillah. Tips trik jQuery kali ini digunakan untuk memberikan sentuhan lembut memudar pada gambar blog. Ketika halaman blog dipanggil (load) maka semua gambar pada blog akan tampak memudar (fade). Dan ketika pointer mouse berada diatas (hover) gambar pada blog maka gambar akan ditampilkan dengan jelas namun ketika pointer mouse meninggalkan (mouse out) gambar maka gambar akan kembali memudar. Demikian penjelasan pintas tentang jQuery Image Hover Fade Effect...

Demo jQuery Image Hover Fade Effect
Klik disini untuk demo jQuery Image Hover Fade Effect

Integrasi jQuery Image Hover Fade Effect pada Template Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:

</head>

Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:

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

Langkah 5
Simpan template dan preview blog anda, kemudian perhatikan gambar-gambar memudar yang ada pada blog

Memahami Script Code jQuery Image Hover Fade Effect

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>

Kode diatas untuk memanggil framework jQuery, jika anda pernah memasangnya, maka kode ini tidak perlu diikutsertakan.

<script type='text/javascript'>

Script identitas bahwa selanjutnya dikenali sebagai JavaScript

$(document).ready(function() {

Fungsi script jQuery telah siap di-load

$('img').fadeTo('slow', 0.5);

Efek fade sebagai efek default (opacity 0.5) pada semua gambar dengan tag img pada seluruh halaman yang di-load

$('img').hover(function() {

Ketika mouse pointer berada di atas gambar (hover) maka...

$(this).fadeTo('slow', 1.0);

Gambar dengan tag img akan diperjelas hingga 1.0

}, function() {

Jika mouse pointer meninggalkan gambar maka...

$(this).fadeTo('slow', 0.5);

Gambar dengan tag img akan memudar (opacity 0.5) lagi.

});
});

Fungsi script jQuery dihentikan

</script>

Fungsi JavaScript di tutup

Unduh jQuery Image Hover Fade
Klik disini untuk mengunduh Script Code jQuery Image Hover Fade Effect

Demikianlah integrasi jQuery Image Hover Fade Effect pada blogger template. Selamat mencoba dan semoga berhasil. Happy Blogging :)