Selamat datang di Dunia Tutorial :D Tidak banyak yang akan temukan ditempat ini, Mungkin hanya ide-ide dan pemikiran kecil ditengah keterbatasan kami. Tetapi bagi kami, keterbatasan bukanlah suatu alasan untuk berhenti saling berbagi.

Effect gambar memudar menggunakan Jquery pada blog / website

Do you like this post?
Akhir-akhir ini aku jarang menulis buat sobat blogger, kesibukan kantor dan keluarga menjadi pokus utama keseharianku. Namun kerinduanku untuk menulis untuk sobat-sobat blogger Dunia Tutorial semua.
Artikel kali ini kita akan membahas bagaimana cara untuk membuat efek pada gambar blog atau website kita menjadi memudar ketika mouse mengarah ke gambar, trik kali ini kita akan menggunakan Jquery, lihat Demo.


  • Login ke Dasboard Blogmu - Rancangan - Elemen Halaman - Edit HTML
  • Geser kebawah dan temukan kode </head>
  • Letakkan kode dibawah ini sebelum kode </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/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>

  • Selesai dan lihat hasilnya. 

SELAMAT MENCOBA.

Artikel Terkait

0 komentar:

Beri Komentar