Jquery Image Hover Fade Effect For Blogspot

Tidak ada habis - habisnya menghias blog dengan cara apapun termasuk dengan cara yang satu ini. Jquery Image Hover Fade Effect For Blogspot sangat tepat digunakan untuk blog kamu yang bertemakan wallpaper, icon, dll yang jelas menggunakan banyak gambar. Efek yang di berikan oleh trik adalah pada saat gambar tidak di sentuh dengan kursor maka gambar tersebut terlihat memudar dan apabila gambar tersebut disentuh dengan kursor maka gambar tersebut terlihat jelas. Lebih jelasnya dan bagusnya lihat demonya aja ya.
Demo
Cara pemasangan Jquery Image Hover Fade Effect pada Template Blogspot

1. Login ke blogger
2. Masuk ke Rancangan >> Edit HTML
   
   
   
   
   
   
3. Cari kode </head> lalu tambahkan kode di bawah ini tepat 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('slow', 0.5);
   $('img').hover(function() {
   $(this).fadeTo('slow', 1.0);
   }, function() {
   $(this).fadeTo('slow', 0.5);
   });
   });
   </script>
   
   
   
   
   
4. Setelah itu simpan dan lihat hasilnya

Telisik lebih lanjut script Jquery Image Hover Fade Effect

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

kode diatas ini berguna untuk memanggil frame work, apabila template kamu sudah mempunyai kode tersebut, lebih baik tidak usah di pasang lagi, karena akan memberatkan template kamu saja

<script type='text/javascript'>

Script diatas menunjukan identitas Javascript

$(document).ready(function() {

Menunjukan script ini siap untuk di buka atau di load

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

Script yang menunjukan efek fade

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

pada saat kursor tepat diatas gambar maka...

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

Tag gambar akan diperjelas hingga 1.0

}, function() {

Jika mouse meninggalkan gambar

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

maka gambar akan kembali pada opacity awal (0.5)

}); });

Script penutup

</script>

Menunjukan script javascript tersebut ditutup atau selesai.

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg