2 Apr 2012

Cara Membuat Efek Label Bergoyang Dengan JQuery

Postingan sebelum tidur dulu ah...hehe, pada postingan kali ini, kita akan belajar bagaimana cara membuat efek label yang akan bergoyang jika kita menunjukkan cursor mouse pada label blog.
Bagaimana caranya? ikuti tutorial berikut....

1.  Masuk Ke Edit HTML blog, centang pada expand widget template

2. Cari kode ini </head> dan letakkan kode berikut di atasnya
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>

3. Jika Template kita sebelumnya pernah di pasang script jquery, maka langkah nomor 2 bisa dilewatkan

4. Tambahkan kode berikut ini di bawah script pada langkah ke dua
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#Label1 li&#39;).hover(function() { //mouse in
$(this).animate({ marginLeft: &#39;12px&#39; }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script><!-- end LinkNudging -->

5. Save, dan lihat hasilnya

NB : Lakukan Back-up setiap akan melakukan pengeditan terhadap HTML untuk menghindari kerusakan akibat kesalahan koding pada Templatenya.


0 komentar:

Posting Komentar

Please Leave Comments On My Blog