Membuat Efek Lebel Nudging
Malam ini saya kembali untuk memposting sebuah efek pada label yaitu dengan efek nudging pada label yang sebelumnya juga saya sudah memposting efek label yaitu cara membuat label cloud berputar, fungsi dari pada label nudging itu sendiri adalah untuk memperindah tampilan blog sobat dengan efek bergoyang bila cursor di arahkan ke label nudging tersebut.
Untuk cara membuatnya :
1. Masuk ke akun blog sobat.
2. Pilih Rancangan/Tata Letak => Edit HTML
3. Jangan lupa untuk membackup template blog sobat untuk menghindari terjadinya kesalahan.
4. Centang kotak kecil ( Expand Widget Template )
5. Kemudian cari kode </head> lalu letakan kode dibawah ini tepat dibawahnya..
: Kode diatas tersebut sudah umum dipakai, jadi jika kode tersebut sudah ada di template sobat tidak usah ditambahkan lagi cukup yang sudah ada saja.
6. Selanjutnya sobat tambahkan kode dibawah ini dan letakan tepat dibawah script kode diatas.
7. Terakhir save template kalian lalu lihat hasilnya.
Untuk cara membuatnya :
1. Masuk ke akun blog sobat.
2. Pilih Rancangan/Tata Letak => Edit HTML
3. Jangan lupa untuk membackup template blog sobat untuk menghindari terjadinya kesalahan.
4. Centang kotak kecil ( Expand Widget Template )
5. Kemudian cari kode </head> lalu letakan kode dibawah ini tepat dibawahnya..
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
: Kode diatas tersebut sudah umum dipakai, jadi jika kode tersebut sudah ada di template sobat tidak usah ditambahkan lagi cukup yang sudah ada saja.
6. Selanjutnya sobat tambahkan kode dibawah ini dan letakan tepat dibawah script kode diatas.
<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>
$(document).ready(function() {
$('#Label1 li').hover(function() { //mouse in
$(this).animate({ marginLeft: '12px' }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script>
7. Terakhir save template kalian lalu lihat hasilnya.
0 komentar:
Posting Komentar
Catatan :
1. Usahakan Komentar tidak mengandung kata kasar
2. Komentar SPAM akan dihapus segera setelah admin review
3. Berkomentarlah sesuai dengan artikel di atas
4. Jika anda memiliki masalah dengan artikel di atas diharapkan berkomentar.
5. Jika ada link hidup di dalam komentar akan segera admin hapus
6. Dilarang menyebarluaskan artikel tanpa persetujuan dari admin
7. Pastikan untuk klik " Berlangganan lewat email" untuk membantu membangun blog ini lebih maju.
Terima kasih untuk anda yang sudah berkomentar dengan baik, Jika ada link yang error pada artikel di atas segeralah berkomentar dengan mengklik tombol balas pada kolom komentar nanti admin akan segera memperbaikinya.