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() {
$('#Label1 li').hover(function() { //mouse in
$(this).animate({ marginLeft: '12px' }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script><!-- end LinkNudging -->
$(document).ready(function() {
$('#Label1 li').hover(function() { //mouse in
$(this).animate({ marginLeft: '12px' }, 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
Terimakasih telah meninggalkan Komentar di Didit Blog | Silahkan berkomentar dengan bebas, tidak mengandung SARA | komentar dengan link HIDUP akan dihapus | Terimakasih ^_^