Cara Membuat Link Bergerak Bergoyang / Nudging di Blog

Blogger, jQuery, Tips dan Trik, Cara Membuat Link Bergerak Bergoyang / Nudging di Blog

Cara membuat link bergerak/bergoyang di blog, Link Nudging adalah suatu efek yang bergerak atau bergoyang dari sebuah/beberapa links yang ditimbulkan dari penerapan jQuery pada template di sebuah website ataupun blog. Mungkin dari kita biasa menyebutnya dengan Link Bergoyang/Bergerak atau menari, selain itu efek jQuery ini juga bisa diterapkan pada sebuah gambar (image)

jQuery link nudging bergoyang bergerak

Untuk sobat blogger yang gemar utak atik blog mungkin bisa mencoba trik link bergerak yang satu ini dan saya rasa bisa membuat blog sobat unik dan menarik. Sebagai contoh sobat bisa melihat link bergoyang/nudging pada label yang ada di sidebar blog saya ini, efek ini menggunakan script jQuery yang menurut saya sangat ringan ketika di-load dan penerapannya juga lumayan gampang, sama halnya seperti tombol back to top yang beberapa waktu lalu saya jelaskan yang sama-sama menggunakan jQuery.

Cara Pasang Efek jQuery Link Nudging/Bergoyang pada Label Blog

  • Login di Blogger
  • Masuk ke bagian Edit HTML pada template
  • Centang pada bagian Expand Widget Template
  • Cari kode </head>
  • Copy paste script dibawah ini dan letakkan tepat diatas 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() {
$(&#39;a.nudge, .#Label1 ul li a&#39;).hover(function() { //mouse in
$(this).animate({ marginLeft: &#39;12px&#39; }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script><!-- end LinkNudging -->

Kalau kode yang berwarna merah tersebut sudah ada di template sobat, kode itu tidak usah di pasang lagi jadi sobat hanya perlu memasang kode dibawahnya saja, Kemudian huruf yang berwarna biru diatas adalah widget id pada label, sobat bisa sesuaikan pada label id di blog sobat. Dibawah ini adalah contoh widget id label dari template blog saya.

<b:widget id='Label2' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>

Kemudian untuk membuat Link Nudging manual pada setiap link apakah itu didalam postingan ataupun widget sobat bisa menambahkan class="nudge" seperti dibawah ini

<a href="http://bloggerpeer.blogspot.com" class="nudge">Blogger Peer</a>

Dan untuk membuat gambar bergoyang / Image nudging sobat bisa membuatnya seperti dibawah ini

<a href=http://bloggerpeer.blogspot.com" class="nudge"><img src="http://4.bp.blogspot.com/-h_Z5uvpjvis/TsqZkLiDMPI/AAAAAAAAANk/-RFAX8sJBoA/s400/Tips-Trik-Blogger-Tutorial-SEO-Info-BloggerPeer-Blogspot.jpg"/></a>

28 comments
about "Cara Membuat Link Bergerak Bergoyang / Nudging di Blog"
Add comments
8:00 PM ×

kalo kaya wordpress ga ada ya gan ???

Balas
avatar
admin
7:20 PM ×

@obat tradisional Pada intinya dimana aja bisa ditaruh gan, ga cmn di blogger aja yg penting kode script jQuery dan script nudge nya ada trus di setiap link juga ada kode class nudge :)

Balas
avatar
admin
5:34 AM ×

Gue juga barusan publish artikel ini bro.

Salam blogger, and nice post. :)

Balas
avatar
admin
11:14 AM ×

thank you very much for sharing the information ... god bless you

Balas
avatar
admin
4:21 PM ×

Top Abis Gann!!!di sini

Balas
avatar
admin
4:12 PM ×

Bagus topiknya boss.
Saya juga ingin menambahkan cara mempersingkat alamat URL nya boss, silahkan klik Di sini

Balas
avatar
admin
4:32 AM ×

:-bd...G

Balas
avatar
admin
10:02 PM ×

:-bd mau coba ahhh :))

Balas
avatar
admin
3:17 AM ×

Makasih Sobat Telah Berbagi Informasinya .. :-bd

Balas
avatar
admin
4:47 PM ×

Mantap gan

Visit Balik yaaa

Balas
avatar
admin
1:04 AM ×

Hehehe, unik lho udah gitu keren lagi, saya suka

Balas
avatar
admin
2:22 AM ×

keren.... boleh di coba kang.

Balas
avatar
admin
7:57 PM ×

mantap bosss..terima kasih,,,

Balas
avatar
admin
8:34 PM ×

Nah yang ini baru bisa di terapkan, karena ada beberapa cara yang tidak bisa di gunakan.
thabks 4 sharing gan mampir ya gan kapan-kapan di blog saya
http://helpus4belive.blogspot.com/

Balas
avatar
admin
2:17 PM ×

mantep mas bro,!!
thanks eah,

www.rieztoshare.com

Balas
avatar
admin
5:29 AM ×

wah kebantu banget nih yang lagi masih pada newbie ,, tengkyu bli :) coba mampir ya di blog baru ane , http://dennitaxu.blogspot.com

Balas
avatar
admin
9:36 AM ×

wah maksh yah sangat bermanfaat kunjungi jga ya blog aku http://ainursopiahacemaxs.blogspot.com/

Balas
avatar
admin
2:28 PM ×

DOWNLOAD ONLINE ADULT 18+ MOVIES SEE HERE-->> www.icoregames.blogspot.com

Balas
avatar
admin
3:23 PM ×

terima kasih banyak untuk infonya sobbb!!!
cara mengobati kanker paru

Balas
avatar
admin
8:59 AM ×

Mantaapp !!! Bagus bnget contoh hasil yg di atas,, aq jdi kpengen pasang nih... :)

bloggerpeer udah aq follow, jka tak kberatan.. tolong di follow balik ya master :)
http://fahrurrozi18.blogspot.com/

Balas
avatar
admin
11:07 AM ×

Thanks infonya Gan.
Ohya Gan, ane minta tolong, apa yang kurang dari blog ane ini?
http://sharing-of-hussein.blogspot.com

Balas
avatar
admin
8:37 PM ×

suwun mas :D

Balas
avatar
admin
8:38 PM ×

kunbal ya newbanie.blogspot.com

Balas
avatar
admin
4:04 PM ×

Terima kasih banyak atas semua infonya, salam sukses yah gan..
http://goo.gl/su0ebq

Balas
avatar
admin
4:52 AM ×

Trims infonya :-bd

Balas
avatar
admin
2:19 PM ×

terimakasih info nya http://jhealthsolution.blogspot.com/

Balas
avatar
admin
2:33 PM ×

kok tempat ane gak bisa yaaa :(

Balas
avatar
admin

Silahkan berkomentar dengan bijak sesuai topik, komentar tidak di-moderasi karena saya percaya seorang Blogger bijak terlihat dari caranya berkomentar. Thanks..!
Show Konversi KodeHide Konversi Kode Show EmoticonHide Emoticon

Terima kasih sudah berkomentar