Cara Membuat Efek Fade pada Gambar / Image di Blog

Ingin memberikan tampilan / efek yang pada gambar di postingan blog?

Gunakan saja Fade Effect jQuery. Dengan menambahkan sedikit kode JS jQuery ke template blog anda, anda bisa melihat gambar/image menampilkan efek fading dikala pointer mouse mengarah ke gambar/image tersebut.


Oke, anda boleh mencoba step step berikut.

• Di Dashboard blog, pilih tab Design, dan sub-menu Edit HTML

• Sebelum menambahkan kode javascript di bawah, sehingga mengubah susunan kode template, ada baiknya backup dulu kode template yang telah ada sebelumnya dengan meng-klik link Download Full Template/Download Template Lengkap. Untuk mengantisipasi kemungkinan kegagalan/kesalahan edit atau modifying yang akan dilakukan.

• Centang kotak kecil disamping tulisan Expand Widget Templates yang berada di atas kotak kode template.

• Dengan menggunakan fasilitas Find (Ctrl-F), cari kode ]]</b:skin>

• Copy kode di bawah ini, kemudian PASTE kan tepat DIBAWAH/SETELAH kode ]]</b:skin>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".post img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".post img").hover(function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".latest_img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".latest_img").hover(function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>

• Klik Save Template/Simpan

• View Blog/Lihat Blog, untuk cek perubahan. 

Sekarang, coba arahkan pointer mouse ke sebuah image di postingan blog, jika image itu menampilkan efek fading, berarti percobaan anda memberikan efek pada image berhasil. 

Selamat Mencoba.