Cara Membuat Efek Gambar Transparan/Gelap Menjadi Terang Ketika Disorot Cursor

Kali ini Saya akan membahas cara membuat 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 ini, dengan dukungan jquery, sehingga efek ini akan terlihat lebih menarik, sebagai contoh blog ini, coba sorot gambar di bawah ini maka akan menjadi terang ketika di sorot.

Untuk membuatnya ikuti langkah-langkah berikut :

• Log In ke Blogger.
• Pilih Template → Edit HTML → Cecklist Expand Template Widget.
• Cari kode </head>, dan masukan script di bawah ini di atas </head> :

<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.
• Pengaturan :
• Teks warna hijau, merupakan tingkat transparansi gambar sebelum dan setelah tersentuh kursor.
• Teks warna biru, merupakan tingkat transparansi gambar saat tersentuh kursor.
• Simpan dan lihat hasilnya

Selamat Mencoba !