Cara Menciptakan Link Bergerak Bergoyang / Nudging Di Blog

Cara menciptakan link bergerak/bergoyang di blog, Link Nudging ialah 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 dapat diterapkan pada sebuah gambar (image)
tombol back to top
yang beberapa waktu kemudian aku jelaskan yang sama-sama memakai jQuery.

Cara Pasang Efek jQuery Link Nudging/Bergoyang pada Label Blog

• Login di Blogger
• Masuk ke bab Edit HTML pada template
• Centang pada bab Expand Widget Template
• Cari arahan </head>
• Copy paste script dibawah ini dan letakkan sempurna diatas arahan </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 arahan yang berwarna merah tersebut sudah ada di template sobat, arahan itu tidak usah di pasang lagi jadi teman hanya perlu memasang arahan dibawahnya saja, Kemudian karakter yang berwarna biru diatas ialah widget id pada label, teman dapat sesuaikan pada label id di blog sobat. Dibawah ini ialah pola 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 menciptakan Link Nudging manual pada setiap link apakah itu didalam postingan ataupun widget teman dapat menambahkan class="nudge" ibarat dibawah ini

<a href="https://dariltech.blogspot.com" class="nudge">Blogger Peer</a>

Dan untuk menciptakan gambar bergoyang / Image nudging teman dapat membuatnya ibarat dibawah ini

<a href=https://dariltech.blogspot.com" class="nudge"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3Y0LHTMSHfYvKbJutDxl8-VOicUias9kglYbmOOxGw1Y_pFeYaHnUKGXj-jiHsQIiWVmOBugx9QpmUmI5AwzQqX4Ftua7iqqpVSBcIPYV8hCj60UUC0AbxLzRW6mz-P_Jtw7EFnHbheI/s400/Tips-Trik-Blogger-Tutorial-SEO-Info-BloggerPeer-Blogspot.jpg"/></a>

Subscribe to receive free email updates: