Cara Membuat Link Nudging Dengan jQuery

Viyan Pradita Minggu, Agustus 14, 2011 ,

Cara Membuat Link Nudging Dengan jQuery. Sebenarnya masih banyak tips dan trik blogspot yang saya bookmark tapi belum sempat saya share disini, jadi kalau tips ataupun triknya udah ketinggalan jaman, harap dimaklumi saja ya. Kali ini saya akan membahas seputar jQuery, pastinya menarik untuk disimak dan dipraktekan sob, sobat pasti udah sering mendengar link nudging atau gampangannya yaitu sebuah link bila tersentuh kursor maka link tersebut akan bergeser kesamping kanan, bisa juga hover link yang bergerak.


Link-Nudging

Yowes, agar lebih jelasnya silahkan lihat demonya dibawah ini:

DEMO LINK NUDGING: Coba arahkan kursor ke arah link dibawah ini



Tertarik untuk membuatnya?? Berikut langkah-langkahnya:


1. Login ke akun blogger sobat
2. Masuk ke rancangan/design
3. Pilih Tata Letak
4. Edit HTML
5. Lalu cari kode berkut: </head> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode </head>

<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.linknudge').hover(function() {
$(this).animate({
paddingLeft: '25px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
}); // end of Jquery Script
</script>


6. Sekarang simpanlah template sobat.

Penting:

Bila di blog sobat sudah ada file.js untuk kode:
http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
Maka sobat tidak perlu lagi memasang file.js tersebut.


7. Cara memasang di link sobat cukup tambahkan kode class "linknudge" untuk link sobat seperti contoh dibawah ini:
<a class='linknudge' href='http://kode-blogger.blogspot.com/'>Kode Blogger</a>

8. Selesai!

Nah cara atau kode di atas adalah untuk link kostum, dengan menambahkan kode class 'linknudge'.
Berikut ini adalah kode lain untuk label dan untuk link kustom sobat:

<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.linknudge, .Label ul li a').hover(function() {
$(this).animate({
paddingLeft: '25px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
}); // end of Jquery Script
</script>


Keterangan:

Untuk pemasangan kode sama seperti yang sudah saya jelaskan diatas.
Sekian dari saya, itulah Cara Membuat Link Nudging Dengan jQuery, Semoga bermanfaat.

Description: Cara Membuat Link Nudging Dengan jQuery
Reviewer: Viyan Pradita - Itemreviewed: Cara Membuat Link Nudging Dengan jQuery - Rating: 4.5

Ditulis Oleh :

Artikel Cara Membuat Link Nudging Dengan jQuery ini dipublish pada hari: Minggu, Agustus 14, 2011. Semoga artikel ini bermanfaat untuk Anda. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

19 komentar
Terjun Ke Kolom Komentar

  1. Another very interesting and good trick from Kode-blogger ^_^

    BalasHapus
  2. @Cek Info's Author: Tergantung keperluan gan, kalo cuma diterapin di beberapa link saja (gak semua link) saya rasa aman2 saja :D

    @Musa Khairul Umam: Kedua tuh gan.. hhiihi :D thank ya

    @Ðēńńy Wijåyå : Sip.. ditunggu hasilnya :D

    @Rudy Haryanto: Sip, thank a lot bro :)

    @kolom desain: harus dipraktekan dulu baru bilang mantep :p

    BalasHapus
  3. wah keren beringin membuatnya

    BalasHapus
  4. makasih info nya sangat menarik nie gan.......

    BalasHapus
  5. sebenarnya gak make js pun bisa bro,coba cek diblog gue bro,gue make css3 murni

    BalasHapus
  6. @ThoraCiamik: Sip masbro
    @XAMthone plus: Sama2 gan
    @randy oktaran: Ya memang ada banyak cara sob, yang saya share disini yg pakae jquey. tq buat infonya gan :)

    BalasHapus
  7. Kalau untuk efek bergeser seperti ini tanpa jequery juga bisa sob.. cuma menambahkan margin-left pada css hover, lalu sentuhan terakhir dengan transition -moz-transition-duration.

    Oia sebelumnya thanks link saya sudah dipasang

    BalasHapus
  8. @Se Avancee: iya sob, memang bisa dgn menambahkan kode CSS, tp yag sedang saya bahas disini yaitu dengan menggunakan jQuery :D
    Thanks info sob...

    BalasHapus
  9. salam knl bro keren sekalh ane cobain di blog ane maklum mc belajar setiap ada tip tip dari para senior sll jd bhan percobaan

    BalasHapus
  10. wah keren banget mas tutorialnya... ijin nyoba ya!

    BalasHapus
  11. Mantaaabbss.. thanks Info nya dah di share,,, sukses terus.. salam blogging

    BalasHapus
  12. di blog saya lnk nudgingnya make css mas hehe jadi lebig asik

    BalasHapus

Catatan:
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS DI SINI...</i>


web design blogs Bloggers - Meet Millions of Bloggers