Bagaimana Cara Membuat Link Bergerak Saat Kursor Menyentuh ?
Anda mungkin pernah berpikir bahwa blog yang Anda miliki mungkin kurang menarik dan terlihat biasa. Ini adalah hal yang wajar apalagi bagi para pengguna blog awalan. Sebenarnya, banyak cara yang bisa Anda lakukan untuk membuat blog Anda indah dipandang. Saya juga berusaha memberikan tutorial dalam menghias blog agar tidak tampak biasa. Anda bisa mencarinya pada kategori menu “Tutorial Blog” di atas.
Nah, saat ini saya akan mencoba memberikan beberapa langkah melalui tutorial membuat link bergerak saat kursor menyentunya. Anda bisa mempraktekkannya, dan seperti halnya tutorial-tutorial lainnya :
1. Anda harus masuk ke akun blogspot milik Anda
2. Lalu coba klik Dashboard
3. Pilih kategori menu – Template – Lalu klik – Edit HTML –
4. Nah, pada kolom kode HTML, silahkan Anda mencari kode <head> (Lebih mudah jika Anda menekan CRTL dan F pada keyboard computer Anda).
5. Copy dan letakkan kode di bawah ini, pas di atas kode <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('a').hover(function() { //mouse in
$(this).animate({ marginLeft: '12px' }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});</script>
<script type='text/javascript'>
$(document).ready(function() {
$('a').hover(function() { //mouse in
$(this).animate({ marginLeft: '12px' }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});</script>
6. Langkah terakhir adalah simpan template
Anda bisa melihat perubahan setelah menyimpan template Anda, saat kursor menyentuh, link akan bergerak. Selamat mencoba :)
Baca juga tutorial yang terkait : Bagaimana Cara membuat Link Blog berwarna Pelangi ?
Tags:
Blogging