Cara Buat Tombol Share Dengan Efek jQuery Nudging
Table of Contents

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() {
$('a.nudge, .#Label2 ul li a').hover(function() { //mouse in
$(this).animate({ marginLeft: '12px' }, 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>
<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/AVvXsEiRXmOuRayV9wAiGAHwuuwY1oVfXuFbm-NAIRqRUswmZtat9HvkrAOg8p9MDZd6F074nIltCpClv7iRA7tuDGfYoAcx9QHoVhOweSRMbdFIZSoMJOPnD1ngL-UbMYwUaT2Joq-nJUJ48VM/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/AVvXsEggVrz1sLyDLCyhiA-tQ9gudCr1YFqXmpBeadcCo-qRHJEcH-0QmMchpiVxjjq59miTDZxL_G8KCMwT73YTM9_fIpsZa-62ZBwGCepElDDTs4I51zV8uwtxlI5ft7AXu_s2294U7kTFgLM/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/AVvXsEg22H1zH0mEpEgvkaaVMpNPXuIL0rm-UN1xNzwMoGHW75SOCu18Zp4cnxPWn7QepiW-uYEsnhBrSQdAyn2I_EuwWU-QMMYpl0JPdBo_ky_J8PYlqfh2yAb4Vc4pVV14NnbbsoomTdtrTuE/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/AVvXsEjDixvobNTFSe4CqGD91qwkoAmwAI_P9csz7KYC8xEnuUVvK7Yk9dS_lJRkbAku2LHe2zF3ViTB4EQ1gIll_q0p9jg880IucsqLwyBE9A77t8_A-nSO8w3z6mUJ1k4ZEzMqsduFdRQvjOo/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/AVvXsEhR5YGtjBKAenO4wXbwfZs_eFQDD_-PKCOKRkX0XwSZUW4fEg8tbX3YWwmKro6p3fpNXJAK2AuzL0m4LCIzkxCWVQFwfZKDquk61v2K4XQea5AzeDW-mJcXAHmDNoavX1TlTIRtWhffEqo/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/AVvXsEikdx50uEB2-cLKweEXSaQIIO-RZPGiKw50hAVhUGPKXoBY2VtlJqeUhKjr6kGY1KNMGbM6rcDosegrLowo31G5WS4ZYWPlEmbEJxU-JT19YbGT8M-fQQ9HogopENUGUkIu0WlrOT8Np0U/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/AVvXsEibkXXttBVlx9uL9oDf1Hy2u7GVOJ6afAf6pj2aBIOBGSUHhApR-zpWgjfk2bkxWw8mwQ0baqfndy3AZNwfOJ-SSYqLUbM8Ey63nDxeTN2qOFoAMfe2lIXEYGDQeay_9rcFlT9KnrPbxAc/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/AVvXsEi90Ucd1luP4aLDisU2xIMeN97QVUM75WITtBmtHQ4S7VKvXJiBcVg2Ne1DCBR9y1dqvZS-Pqs68DWy31lAFTrADeP4gwJVB3HlB2cQhF_ZaXaTqS-kvgAFQV_6-x-0uOv_YqzsZHEaRPQ/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/AVvXsEhpaMnX_kQtfgsLQmD_RZiDOYC8LH2618kqZGbmuypLKZVrMntOCA5Xv-z-SeDH6KpZ4PVBoPNNERny9g1xN70XfsNutuACk-Hc_9boa2UHNeVFp5RBCLQAg-S5F7HMJR6WWDVndkwJ9FA/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/AVvXsEihOJkPLAsWvs1nP2C7vqlD2T4DTcJHF7jG7_X36LULorL76YktnVAyW6e_2p1Q2WK0U7nyRhQ2O3_Bo8D8RXS_QV8AFT_LC8cs2a6ZoBfLqNXjUbkqXH5Vuhttmq21WN9pQFW0oOgRNok/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/AVvXsEgXmTpPSxAU_Ja1rKQxDVMlkm3j0UjwoHbrAROt76B9worF1sZ6rn414MrrABtmNXyWACwCUP73a7bo2c4oHYVETrZuEp5R30fXgSk-HhLu9PhbMZi1w0JVB4NLkvpiuhtnI0Ovx7kCEAc/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://bloggerpeer.blogspot.com' target='_blank'><img alt='Tips Triks Blogger, Tutorial SEO, Info' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj83TxPIOciPNEUgWk0fpz_iSJUMeJlg_syew6Wv89lOAohEva8IwjqKLpRAGETN2i04A5GhrFs5KvvsviriMActoh-qQFBTysHUni1kJgWLbtNb6qldwBnFCtY7S9SW0xhcmUarGhgIaI/s1600/blogger-peer.gif' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;'/></a></div>
</td></tr>
</table>
</b:if>
- Terakhir simpan template
CARANYA: Jangan memasang kode script yang dibawah kode ]]></b:skin> atau skip saja kode itu, kemudian lanjutkan dengan kode yang kedua dan terakhir simpan template.
Post a Comment