Cara Membuat Link Bergerak Bergoyang / Nudging di Blog - Tips Trik Blogger, Tutorial SEO, Info

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>

Hasilnya akan seperti ini Blogger Peer

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/s1600/Tips-Trik-Blogger-Tutorial-SEO-Info-BloggerPeer-Blogspot.jpg"/></a>

Hasil gambar nya akan seperti ini Tips Trik Blogger dan SEO Tutorial



thumbnail Cara Membuat Link Bergerak Bergoyang / Nudging di Blog
Author: Komang Gede
4.5 - 1 Reviewed by Blogger Peer
Silahkan bagikan artikel tentang Cara Membuat Link Bergerak Bergoyang / Nudging di Blog ini kepada teman anda dengan meng-KLIK tombol diatas

27 comments "Cara Membuat Link Bergerak Bergoyang / Nudging di Blog"

kalo kaya wordpress ga ada ya gan ???

@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 :)

Gue juga barusan publish artikel ini bro.

Salam blogger, and nice post. :)

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

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

:-bd mau coba ahhh :))

Makasih Sobat Telah Berbagi Informasinya .. :-bd

Mantap gan

Visit Balik yaaa

Hehehe, unik lho udah gitu keren lagi, saya suka

keren.... boleh di coba kang.

mantap bosss..terima kasih,,,

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/

mantep mas bro,!!
thanks eah,

www.rieztoshare.com

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

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

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

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

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/

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

kunbal ya newbanie.blogspot.com

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

Trims infonya :-bd

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

Post a Comment “Cara Membuat Link Bergerak Bergoyang / Nudging di Blog

Baca dulu ya! Suka dengan emotikon? lihat kodenya
 
Back To Top Blogger