Link Bergerak Saat Disorot Mouse – Setelah dulu gw nulis tentang cara membuat efek link warna pelangi, kali ini gw mau coba share satu cara lain yang bisa kita gunain buat modifikasi link. Cara ini lumayan seru lah, sebab link yang kita buat nanti bisa bergerak kalo disorot oleh mouse.
Sebagai contohnya anda bisa lihat di bawah ini coba mous anda arahkan ke teks ini.....!!!!!
Contoh 01
Kita mulai ea !!
Langkah pertama:
1. Login dulu ke blogger.com
2. Pilih menu “Design”
3. Klik “Edit HTML”
4. Cari kode </head>
5. Copy/paste kode dibawah ini tepat setelah kode </head>
6. Klik “Save Template”
Langkah kedua:
Dalam pembuatan link nanti, tambahkan kode class="nudge"
Contoh link dengan teks:
<a href="url tujuan" class="nudge">teks yang akan dijadikan link</a>
Contoh link dengan gambar:
<a href="url tujuan" class="nudge"><img src="url gambar"></a>
Keterangan:
1. Silahkan ubah contoh link di atas sesuai kebutuhan
2. Teks yang berwarna hijau adalah jarak bergerak link, silahkan di ubah sesuai selera
Sebagai contohnya anda bisa lihat di bawah ini coba mous anda arahkan ke teks ini.....!!!!!
Contoh 01
Kita mulai ea !!
Langkah pertama:
1. Login dulu ke blogger.com
2. Pilih menu “Design”
3. Klik “Edit HTML”
4. Cari kode </head>
5. Copy/paste kode dibawah ini tepat setelah kode </head>
<script src='http://agungxzeg.googlecode.com/files/dynamiclink.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('a.nudge').hover(function() { //mouse in
$(this).animate({ paddingLeft: '5px' },400);
}, function() { //mouse out
$(this).animate({ paddingLeft: 0 }, 400);
});
});
</script>
<script type='text/javascript'>
$(document).ready(function() {
$('a.nudge').hover(function() { //mouse in
$(this).animate({ paddingLeft: '5px' },400);
}, function() { //mouse out
$(this).animate({ paddingLeft: 0 }, 400);
});
});
</script>
6. Klik “Save Template”
Langkah kedua:
Dalam pembuatan link nanti, tambahkan kode class="nudge"
Contoh link dengan teks:
Contoh link dengan gambar:
Keterangan:
1. Silahkan ubah contoh link di atas sesuai kebutuhan
2. Teks yang berwarna hijau adalah jarak bergerak link, silahkan di ubah sesuai selera
Terima Kasih
Tidak ada komentar:
Posting Komentar