Cara Mudah Membuat Tombol Share Efek jQuery Nudging

Banyak cara untuk mempercantik tombol share pada blog, salah satunya adalah dengan menerapkan efek jQuery Nudging. Tombol ini terlihat unik dan menarik, sehingga akan membuat blog sobat terlihat lebih menarik juga. Namun sebelum sobat memasang widget tombol share ini, ada baiknya sobat membackup template terlebih dahulu caranya ada disini. Baiklah tanpa banyak basi basi lagi, berikut cara mudah membuat tombol share efek jQuery nudging.

1. Pertama, login dulu ke Blogger

2. Pilih Template

3. Pilih Edit HTML

4. Cari kode ]]></b:skin>

5. Pasang kode di bawah ini diatas 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() {
$('a.nudge, .#Label2 ul li a').hover(function() { //mouse in
$(this).animate({ marginLeft: '12px' }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script>

6. Kemudian cari kode <b:if cond='data:post.hasJumpLink'>. Setelah ketemu, maka diatas kode tersebut akan ada kode <div style='clear: both;'/> </div>

7. Pasang kode dibawah ini diatas kode <div style='clear: both;'/> </div>

<br/>
<b:if cond='data:blog.pageType == "item"'><b>Share it to your friends..!</b><br />
<br />
<table border='0'>
<tr> <td><script type='text/javascript'>
window.___gcfg = {lang: 'en'};
(function()
{var po = document.createElement("script");
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();</script><g:plusone size="standard"></g:plusone></td>
<td><div class='bookmarks'>
<a class='nudge' expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Share to Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiByO-I3UNFbqg6092EF2GnmzqEELKeEFWiGtFgzxIC_C-XxcR3qPYu4b7Q6wi96XU_DCEHoReoNJF7p4n3eVBXB3RxFmFM-v24FXpxC7x4mtrGhxgRJf37-EP38-PWfJZQZvsQiqOwRH0/s1600/facebook.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Share to Facebook'/></a>
<a class='nudge' expr:href='"https://twitter.com/intent/tweet?text=" + data:post.title + "&amp;url=" + data:post.url ' rel='nofollow' target='_blank'><img alt='Share this post on twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIPxBMpiu3EkArmdgccIs8JIfZJewEFq1ApY80Gz_gah4Ue7Trurc6i79lRTnrXVJPNx6ixLkUi42j6RvGBqZmaaDGPQvMrHp-LQHNlt-F02vyQz0Yhqs-mbneifkfcxauEmvwuL7MU8I/s1600/twitter.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Share this post on twitter'/></a>
<a class='nudge' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Bookmark Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic8UUY7Qjx3p3K5hWkcfXlL91K9uT9DS8OeWjetjztocUFQVro9-YTalHUUR-3_0usrnqxq8cVQFOWsMju-75rcUWffxnC22G96Chi6bggQ5IeQSv0XZl_M-kY1eiMBLvYhCnAxAHqwqI/s1600/delicious.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Bookmark on Delicious'/></a>
<a class='nudge' expr:href='" http://digg.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Digg This' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG8xlQhbCGRisGMeybXnqA_ArOBNjrz2yZWBwkYT_DHjDCqAEe9rS6m_gPMc75hzkZ2GWE7Nma4Yvi0S2um-48cUmoy2vdtFFbwDvnLJzVyN2eyAMvHGqXnmTijAPmXxskjTj0Jz2k_ww/s1600/digg.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Digg This'/></a>
<a class='nudge' expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Stumbleupon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzsjWRsb17BPkPWWnD5jVlzfxoRqM226QQQsszpv8Ode_j6K__DbkUMDyB6xIj7waNp8EcewUWZFEBQQgFczd-JTjq5wig25h72Aj-ED6ORvCJnQ68s6b7cjejOaWjpMBkb_Wi5Z7Jz7E/s1600/stumbleupon.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Stumble This'/></a>
<a class='nudge' expr:href='" http://reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Reddit' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6sdNWs2-NlDVmJhAuR7cl1FX9GoeRNONTAtVNIzHhyphenhyphenkS4Fb5VYFCboMytio0bsVBfryHqJd3Jv48a-iBquLYv7e1hiLi8pUdctBKnYD9ui0KU7cb0Ou4Nw1o3J4KCszEutTXH2Aw2PCg/s1600/reddit.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Share to Reddit'/></a>
<a class='nudge' expr:href='" http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Yahoo Bookmark' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4imBlO1OWWP4i70i3f70cnPZeT5mZDZwtAIFmzGButEK4NvVvpBZzKjsIX6z_O1250CLEq0Ag7M7sXQaezGQu77Hro0kQDNOR1iCNNYboWZnZ7RRb9nXnyLHPXCdNouQ1MxroZRhc1wA/s1600/yahoo.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Add to Yahoo Bookmark'/></a>
<a class='nudge' expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Furl-Diigo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGlv2s9hMN6m_AIE2m0jr_1et5Xnl1wQH27HB6lQAPYXzM9P6xBLUceuDJAKGtnjNzYCG-UJot1UOMmeahhwCKyDSkVl9tle0esFTf7oiqfHxRRocbVuzqrw-sfOCFbLTnON_lsof90PE/s1600/furl.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Send to Furl/Diigo'/></a>
<a class='nudge' expr:href='" http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Google Bookmark' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6vieGaUzouBHA_aIitlh2XfX7swFkLceUFtA_ZR90X0tUGW962EjTYxXKbt3kekOJXgl5V2DKNjuH1vjBvLrj9Cc6lsJFjsjvTthyS5F3AQo-yH7tonhXh-HTEflISprpByHgRfGsmco/s1600/google.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Add to Google Bookmark'/></a>
<a class='nudge' expr:href='" http://technorati.com/faves?add=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Technorati' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz8rjadRyY13dslfPcM57sK7Exq7xo0i0v_sKr9SqZxaHjFI7Yl4oVHb7AdxjyCJ5fxpdk90gxTYmEdepVFjq6Td-Tk4bvssnw7B2i_IqqMCUE01Bh-vQsriSfrFth_kVATcFycB_qaZc/s1600/technorati.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Add to Technorati'/></a>
<a class='nudge' expr:href='" http://www.newsvine.com/_tools/seed&amp;save?u=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Newsvine' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkhZf7XfQAmkM7SBiEt9ZaEDB__By5fw-tbBOmF3D4Ta28WhxuL3vPGQdzM2S78u1INYve6vvfkO4XuoOLwq8D3xJrMkF1EnmNkyZCtppaFMdInGQr6EbMGjVLcQXvXgtX6J5o9Gcpg3A/s1600/newsvine.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Save to Newsvine'/></a>
<a class='nudge' href='http://copasange.blogspot.com' target='_blank'><img alt='Berbagi Macam-Macam Tutorial, Info' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3O0wbD1IXJSa0i9mRdLOoY326M2rEBybeThsWZgs-wasvUNcbLFmB_c9B1YXET3vNyVp3wzT3doOYhmfVJbscRFC98Qv__rZgn9k0IZfeS90OJU7jIGaZTkkuXShuYKIjRUPlx4xDN58/s1600/blogger-peer.gif' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;'/></a></div>
</td></tr>
</table>
</b:if>

8. Simpan template

Demikian trik cara mudah membuat tombol share efek jQuery nudging, semoga dapat membantu dan bermanfaat. Terimakasih atas kunjungannya.

► Copas Sange ◄

Sobat sedang membaca artikel tentang Cara Mudah Membuat Tombol Share Efek jQuery Nudging. Jika sobat ada pertanyaan atau pesan mengenai artikel diatas, salurkan pada kolom berkomentar !! Dan untuk mendapatkan tambahan pahala, silahkan LIKE and SHARE ♂

<a href="http://copasange.blogspot.com/2016/04/cara-mudah-membuat-tombol-share-efek.html" target="_blank">Cara Mudah Membuat Tombol Share Efek jQuery Nudging</a>

:: Salam Blogger ! ::