SELAMAT DATANG DIBLOG KAMAI

Sabtu, 11 Agustus 2012

Cara Buat Tombol Share Dengan Efek jQuery Nudging


Cara Buat Tombol Share Dengan Efek jQuery Nudging

Cara Membuat Tombol Share Dengan Efek jQuery Nudging, cara memasang social bookmarking share button widget ini telah di request oleh salah satu pengunjung Blogger Peer yang kebetulan tertarik sama tombol share widget nudging menggunakan efek jQuery yang ada di blog saya ini, nah kebetulan sekarang saya sempat mengulasnya dan akan saya bagikan kepada anda semua

Tombol Sharing Widget Button
Tombol Share widget menggunakan jQuery nudging ini sebenarnya penerapan dari apa yang saya jelaskan pada artikel saya yang sebelumnya yaitu cara membuat link bergerak - link nudging, tetapi disini saya menggunakan gambar/ikon sehingga terlihat menarik dan unik. Icon sharing widget yang ada dibloggerpeer.blogspot.com ini terdiri dari beberapa situs social media yang umum dipakai oleh orang untuk membagikan artikel yang bermanfaat bagi kerabat mereka. Banyak dari para pengunjung bertanya kepada saya apakah script jQuery tidak berat ketika di load? jawabannya adalah TIDAK, script jQuery ini sangat ringan dan saya pun memakai script ini pada sharing widget di blog ini dan juga pada tombol back to top yang ada pada bagian bawah halaman, jadi jangan khawatir untuk memasang script jQuerypada blog anda.

Sebelum kita memasang ikon sharing widget ini ada baiknya anda back up template terlebih dahulu untuk jaga-jaga kalau ada kesalahan pemasangan
  • Login di Blogger
  • Masuk ke Template > Edit Html
  • Centang pada Expand Widget Templates
  • Cari kode ]]></b:skin>
  • Copy kode dibawah ini dan paste tepat dibawah kode  ]]></b:skin>
<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, .#Label2 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 --><!-- end LinkNudging -->
  • Gunakan CTRL+F kemudian cari kode <b:if cond='data:post.hasJumpLink'> setelah ketemu kemudian diatas kode tersebut akan ada kode <div style='clear: both;'/> <!-- clear for photos floats --></div>
  • Copy code dibawah ini dan paste tepat diatas kode <div style='clear: both;'/> <!-- clear for photos floats --></div>


  • Terakhir simpan template
Good Luck..!

0 komentar:

Posting Komentar

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | cheap international voip calls