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!!!
kalau tidak mau di copas ,jangan ngeblog,,kelaut aja,,memangnya kamu gak pernah nyuri script,,,,
BalasHapus@BENNY TRI HARTOYOMaaf bos, sya tidk prnah nyuri script.
BalasHapuswlpun sya mngmbil script sya psti mnyrtkn sumber.
Perbedaan blogger dan plagiator: bla blogger bla copas psti mnyrtkan sumber
dan bagi plagiator copas tidk akan myrtkn sumber, dan biasanya Plagiaotor adalah sperti Anda yang tidk mmhmi dunia intrnet dan mauya enk aja, tnpa mau bljar.
Plagiator pun bla berkomtar bsa klihtan dri nda komentar speri Anda, yg trliht mndukung Plagiator, krna Anda sndiri juga plagiator :Q
@BENNY TRI HARTOYOBner gan, ane juga gak snebg ama Plagiator.
BalasHapusY gan klihtan Kalo Plagitor dari komentnx dah klihatan.
Hati2 gan ama tu orang gan.
Profil aja di sembunyiin, tkut ketahuan kalo dia admin dari blog Copas kali.
Hati2 juga ni kalo-kalo blog ane di copas ama tu orang.
Copas boleh asal menyertakan sumber.
Yang g' mnyrtakan sumber cuma plagiator.
keren nih,gan bisa tolongin ane nggak,kok kalau ane buka fb di rumah gambar nya kaya gini'
BalasHapushttp://lasidroid.blogspot.com/2012/08/fb-erorr.html
.. maav kawan,, aq mau tanya. itu contoh nya kayak yg di atas itu ya?!? ..
BalasHapus@♥Vpie◥♀◤MahaDhifa♥Yups benar, demonya lansung saya sertakan di atas!
BalasHapus