05 Desember 2011

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.

Share on Facebook
Share on Twitter
Share on Google+
Tags :

Related : Cara Membuat Efek Label Bergoyang dengan JQuery

0 Komentar:

Posting Komentar

Terimakasih telah meninggalkan Komentar di Didit Blog | Silahkan berkomentar dengan bebas, tidak mengandung SARA | komentar dengan link HIDUP akan dihapus | Terimakasih ^_^