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)
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 instruksi </head>
- Copy paste script dibawah ini dan letakkan sempurna diatas instruksi </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() {
$('a.nudge, .#Label1 ul li a').hover(function() { //mouse in
$(this).animate({ marginLeft: '12px' }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script><!-- end LinkNudging -->
Kalau instruksi yang berwarna merah tersebut sudah ada di template sobat, instruksi itu tidak usah di pasang lagi jadi sahabat hanya perlu memasang instruksi dibawahnya saja, Kemudian abjad yang berwarna biru diatas ialah widget id pada label, sahabat 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 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/AVvXsEgksyl-1OcKb-6roBlRR4AuxsPtnsVv3c6za0IFs1GrVIYcHA4T9PRL7uEy307dGhbwez9ceot1EH2O_DG744E1U6Mksc2XT78HEVjyrKt4xYZC84Oj3RO3ZoqRpxBAynRyN83ngvAYq5I/s400/Tips-Trik-Blogger-Tutorial-SEO-Info-BloggerPeer-Blogspot.jpg"/></a>
