Cara Menciptakan Link Bergerak Bergoyang / Nudging Di Blog

Cara menciptakan link bergerak/bergoyang di blog, Link Nudging ialah suatu dampak 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 dampak 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 isyarat </head>
• Copy paste script dibawah ini dan letakkan sempurna diatas isyarat </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 isyarat yang berwarna merah tersebut sudah ada di template sobat, isyarat itu tidak usah di pasang lagi jadi sahabat hanya perlu memasang isyarat dibawahnya saja, Kemudian aksara yang berwarna biru diatas ialah widget id pada label, sahabat dapat sesuaikan pada label id di blog sobat. Dibawah ini ialah referensi 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 sahabat dapat menambahkan class="nudge" menyerupai dibawah ini

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

Dan untuk menciptakan gambar bergoyang / Image nudging sahabat dapat membuatnya menyerupai dibawah ini

<a href=http://bloggerpeer.blogspot.com" class="nudge"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbbtHRaFgillBX9Om2NZptPsEux0Iw-vxtLANBAjDcTInY8Cw5zO6E2sEoEfHWuKRsVSGVwGIwBcz9gdgCbj-CeVj62D1W_6K-ILb0cn09LFsA0a0feqDcvDlemnB27pgAM0IT3TF0zrc/s400/Tips-Trik-Blogger-Tutorial-SEO-Info-BloggerPeer-Blogspot.jpg"/></a>

Tweet

Subscribe to receive free email updates: