Cara Membuat jQuery Link Nudging di Blogspot

Cara membuat jQuery link nudging di blogspot. Mungkin dari sobat blogger tidak asing lagi dengan tips membuat link nudging dengan jQuery  ini karena sudah banyak sekali artikel yang membahas tips and tricks blogger cara membuat jQuery link nudging di blogspot ini, tapi tidak ada salahnya saya akan mengulas kembali disini. Sebelumnya saya juga sudah pernah membahas tentang bagaimana membuat back to top dengan jQuery di blogger yang intinya sama-sama menggunakan efek animasi jquery yang tentunya akan membuat tampilan blog sobat akan menjadi menarik dan indah dengan link bergerak kekanan dan kekiri bergoyang seperti menari atau dancing link ketika sobat mengarahkan kursor ke link tersebut. Sebagai contoh sobat bisa melihat Link Label yang ada di sidebar kanan blog ini. Sangat menarik bukan? nah untuk membuatnya sobat hanya perlu menambahkan sedikit jQuery script di blog template sobat dan sekarang mari kita ulas bersama-sama.

Okey tanpa panjang lebar mari kita praktekkan

• Silahkan Login di Blogger
• Klik Design
• Klik Edit Html
• Klik Expand Widget Template
• Cari kode </head>
• Copy paste link di bawah ini dan letakkan diatas </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 biru diatas sudah ada di template sobat jadi kode itu tidak usah dipasang, sobat hanya tinggal memasang kode yang dibawahnya
Hal yang sangat penting adalah penempatan number dari widget blognya, di blog saya ini saya menggunakan widget label yang numbernya adalah Label1, sobat bisa melihatnya di edit html template sobat. Lihat contoh gambar dibawah

Setelah mengetahui kode label atau label id nya sobat bisa menempatkan didalam scriptnya, sobat bisa melihat contohnya seperti kode script yang diatas. Jika sobat mempunyai widget label lebih dari satu sobat bisa memilih label mana yang ingin dijadikan nudging dengan menambahkan Label numbernya dan menambahkan sedikit kode, lihat gambar dibawah untuk contohnya..! klik gambar untuk memperbesar ya..









Nah itu untuk membuat link nudging pada label, untuk membuat link nudging dengan jQuery manual pada setiap link apakah itu di dalam postingan ataupun di dalam widget sobat bisa menulis link nya seperti contoh di bawah ini

MangDe Blogger

Sobat hanya perlu menambahkan kode class pada link nya seperti dibawah ini

<a href="http://mangde182.blogspot.com" class="nudge">MangDe Blogger</a>

Dan untuk membuat Image nudging sobat bisa menambahkan kodenya seperti dibawah ini

<a href="http://mangde182.blogspot.com" class="nudge"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4LUPD6HJbgKLBJiXJW1lOPp7sQ3wSRmj1x9s6uVF00PKmtb1C_M2Z9mj69y3pZl-xw9LxTyieC-zRxybwC33psFr-V2YNW8ofIyKJTek9brP6qsCK6N7eJj95hcqk-oGfkwsCIZGuVw/s1600/Mang%257EDe.png"/></a>





Dan terakhir jangan lupa simpan template sobat
Semoga berhasil ya Sob.. inget komennya :)

Sobat sedang membaca artikel tentang Cara Membuat jQuery Link Nudging di Blogspot dan sobat bisa menemukan artikel Cara Membuat jQuery Link Nudging di Blogspot ini dengan url http://mangde182.blogspot.com/2011/08/membuat-jquery-link-nudging.html,silahkan di bookmark jika artikel Cara Membuat jQuery Link Nudging di Blogspot ini sangat bermanfaat bagi sobat,atau klik tombol share diatas untuk membagikan link Cara Membuat jQuery Link Nudging di Blogspot kepada teman sobat.