Link nudding adalah link yang menyenggol atau bergoyang bila di sentuh oleh cursor.
Efek Link Nudging ini akan membuat link di blog Anda menjadi lebih menarik. dalam Membuat Link Nudging kita akan menggunakan bantuan dari jQuery atau CSS jadi Anda harus memilih salah satu cara ingin menggunakan jQuery atau CSS??? Untuk lebih jelasnya tentang Link Nudging silahkan lihat demo berikut.
Live Link Nudging Demo ↓
Perlu Anda ketahui sebelumnya Oto Website pernah membahas tentang Link Nudging juga yang berada di article Cara Membuat Link Bergoyang.
Jika Anda sudah paham dengan maksud tutorial kali ini mari kita bahas cara membuatnya pada blog Anda.
Pilih salah satu mana yang ingin Anda gunakan, Membuat Link Nudging dengan jQuery atau CSS ?
Membuat Link Nudging dengan jQuery
1. Login ke akun blogger Anda.
2. Pada Dasbor klick Template ➨ Edit HTML.
3. Dalam Edit HTML temukan kode </head> blia kesulitan mencarinya coba klick DISINI.
4. Bila sudah ketemu sekarang letakkan script jQuery berikut tepat di atas kode kode tadi.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var dur = 400; // Duration Of Animation in Milli Seconds
$(document).ready(function() {
$('a.ow').hover(function() {
$(this).animate({
paddingLeft: '25px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
}); // end of Jquery Script
</script>
</script>
<script type='text/javascript'>
var dur = 400; // Duration Of Animation in Milli Seconds
$(document).ready(function() {
$('a.ow').hover(function() {
$(this).animate({
paddingLeft: '25px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
}); // end of Jquery Script
</script>
5. Simpan template.
Kode Pemanggil Link Nudging dengan jQuery
Pada saat mengedit postingan masukkan kode berikut:
<a class='ow' href='http:/otowebsite.blogspot.com'>Oto Website</a>
Keterangan:
- Ganti teks yang di block kuning dengan url tujuan.
- Ganti teks yang di block biru dengan nama link.
Membuat Link Nudging dengan CSS
Dalam Membuat Link Nudging dengan CSS ini kita membaginya menjadi dua cara:
- A. Link Nudging Untuk Semua Link (otomatis semua link)
- B. Link Nudging Untuk Link Terpilih (kita yang menentukan)
1. Login ke akun blogger Anda.
2. Pada Dasbor klick Template ➨ Edit HTML.
3. Dalam Edit HTML temukan kode ]]></b:skin> atau <style> blia kesulitan mencarinya coba klick DISINI.
4. Bila sudah ketemu sekarang letakkan salah satu kode CSS berikut tepat di atasnya.
A. Link Nudging Untuk Semua Link
a:link {
-webkit-transition: padding-left 250ms ease-out; -moz-transition: padding-left 250ms ease-out;
}
a:hover {
padding-left: 12px;}
5. Simpan template.
B. Link Nudging Untuk Link Terpilih
.ow {
-webkit-transition: padding-left 250ms ease-out; -moz-transition: padding-left 250ms ease-out;
}
.ow:hover {
padding-left: 12px;}
5. Simpan template.
Kode Pemanggil Link Nudging dengan CSS Untuk Link Nudging Terpilih (B)
Pada saat mengedit postingan masukkan kode berikut:
<a class="ow" href="http://otowebsite.blogspot.com">Oto Website</a>
Keterangan:
- Ganti teks yang di block kuning dengan url tujuan.
- Ganti teks yang di block biru dengan nama link
Bagaimana Selanjutnya?
Saya rasa cukup untuk kali ini, bila Anda kesulitan dalam Membuat Link Nudging dengan jQuery atau CSS silahkan bertanya, saya akan dengan senang hati membantu Anda!!!
Tidak ada komentar:
Posting Komentar