Salam Blogger,
Pertama-tama saya ucapkan terima kasih pada Tuhan Yang Maha ESA,kwkwkwkwkwkw
jadi kayak pidato bahhh,langsung saja yach sob.....Kita bahas tentang Jquery Link Nudging ini....
Jquery Link Nudging ini berguna untuk menghias blog kita,
Semakin menarik blog kita maka semakin tertarik juga pembaca yang melihatnya,
Ya gak sob??
Awalnya baca nich artikel dari blognya MangDe,biar bisa saling berbagi yach ngopy dikit artikelnya Mangde lah.
hehehehehe....
Jquery Link Nudging memberi efek pada tulisan yang berisi link di blog kita.
Contoh Jquery Link Nudging-nya bisa sobat dilihat di link label saya..
Langsung aja cekiidottt bagaimana cara membuat Jquery Link Nudging di blog sobat sekalian,
begini nich caranya sob:

1.Login ke blogger
2.Pilih Design atau Rancangan
3.Klik Edit Html
4.Centang Expand Template Widgets
5.Cari kode </head>
Tips:Tekan Ctrl+F untuk memudahkan pencarian.
6.Copy paste kode di bawah ini,letakkan di atas 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() { $('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 -->
Kode di atas berfungsi untuk widget yang mempunyai Label1 atau tepatnya widget yang ada di blog sobat cuma ada 1,
Contohnya di dalam Edit Html seperti di bawah ini:
</b:widget> <b:widget id='Label1' locked='false' title='Labels' type='Label'> <b:includable id='main'>
Jika sobat sekalian mempunyai widget lebih dari 1,sobat cukup mengganti kodenya saja,
atau copas sajalah kode dibawah ini biar makin gampang,iya gak??
hehehehehe....
<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, .#Label2 ul li a').hover(function() { //mouse in $(this).animate({ marginLeft: '12px' }, 400); }, function() { //mouse out $(this).animate({ marginLeft: 0 }, 400); }); }); </script><!-- end LinkNudging -->
Sobat juga bisa menggunakan efek ini pada postingan ataupun dalam widget hanya tinggal menambahkan kode class="nudge" pada link di postingan ataupun widgetnya,
contohnya seperti di bawah ini:
<a class="nudge" href="http://kinvanburton.blogspot.com/">KinvanBurton</a>
Dan Hasilnya seperti di bawah ini:
KinvanBurton
Sobat Juga bisa membuatnya image nudging,hanya menambahkan kode seperti di bawah ini:<a class="nudge" href="http://kinvanburton.blogspot.com/"><img alt="Kinvanburton Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip2LRJosJ39EuE81ac3XdOYbFDBr7gyMsuzJvJe0-fRKEL6W25ucc8g5GIy5isbY10SaDqDQFri2r4EyTMO0VT2HT6wDkFkcIB5EHBIe0eGry-9v_uBtpoSHORpyDA9WlBhKi_P0m-SyYX/s200/FunPhotoBox050335s3uenisf.gif" /></a>
Dan hasilnya seperti di bawah ini :
Sekian dulu ya....
Dan terima kasih buat narasumber :
http://www.mangde.tk