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 memakai efek jQuery yang ada di blog aku ini, nah kebetulan kini aku sempat mengulasnya dan akan aku bagikan kepada anda semua
cara menciptakan link bergerak - link nudging, tetapi disini aku memakai gambar/ikon sehingga terlihat menarik dan unik. Icon sharing widget yang ada di tombol back to top yang ada pada bab bawah halaman, jadi jangan khawatir untuk memasang script jQuery pada blog anda.Sebelum kita memasang ikon sharing widget ini ada baiknya anda back up template terlebih dahulu untuk jaga-jaga bila ada kesalahan pemasangan
- Login di Blogger
- Masuk ke Template > Edit Html
- Centang pada Expand Widget Templates
- Cari kode ]]></b:skin>
- Copy aba-aba dibawah ini dan paste sempurna 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 lalu cari kode <b:if cond='data:post.hasJumpLink'> sehabis ketemu lalu diatas aba-aba tersebut akan ada kode <div style='clear: both;'/> <!-- clear for photos floats --></div>
- Copy code dibawah ini dan paste sempurna 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/AVvXsEi59-ni_KPm5Ky5V8gNg3H7aegucDdAlSuHUzgCh95d4hsXAyCKTArtfeX_euiaXmCokEymT0JsY7rjaPO5Q6DrGQUuLLAXJQjL6uDmlZgim09txXhFbZEOp61zprBxXkHFFXvumIk08zA/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/AVvXsEgDShld8M57J0IDIg2129UyK3HAbKB99_BcYhpvMT7GOyN4fU3mDbNMz2bk2aoAADA-2WyEO-ddtg5sdDq7XiuObCDoSPxjxPYwLUJKKxyLgOYLhdKqLVXRJKM2FouARPSe3j_e8YziE28/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/AVvXsEhK2zKrfg5Hq1Y6Gs6mwmBEvTqyIvtZxoNCNFwdk_k8gYAfT_Ztqms1b6Uwjib1UVzeaorHsteNHHjGJX3TAxrCGZTNzzR9ecLljzVIu5wlbJKWM5mIRXrfbD8XxjVMko1Q8XJ3xvBDWc4/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/AVvXsEjKpBcUetHyP1vQtndNNljBnTZFiwIqFtOhq0av1BFJRI2DL9eycvM7KbG1SGoexsAJQRn2Kv45-DxF6t5_dWtWIKC38i5p3tMqSqSklnzDYyRfGvLHh4tYS8SlihR5wQi1CVoNZEC3tCc/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/AVvXsEjFLSswRwz1LOCslZYC_EtRHumXfcR4KJTJdH9clgPqZhudMmnW1GKNbh4KXakgHrkIqmU3mA__gq0moLwRX9aX6pZ5wnZsRyg7dLfzkTrJDgnnUcBAb1Jewh33fstJhJtPGdfpdzZlx0o/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/AVvXsEgA4_DwrC8j1gFqYC9B1W-TNeJEWKxw6BkdP77rGdFNygvYLsifCvPWKKvS3UXBx-T63PCSDgNLD5YwrsiiRBd9XfgrRisrq1DQEDFgYvFlva0sDktFQAnwuZv0UkEdpXlkAce919_CD24/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/AVvXsEhoGQ37-jdjhf24cRkqM411S-QC32wUEElOb7BctmdgEweUFe4bnvZLV-M7-gntGxmFtyHueQTRB2Ik766KPUc6sYuML-l2MCOindLVlEr9BHS1tMWLOvL98Hb73trUtxcYYleyIACu-18/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/AVvXsEh5yXYvLyWAxaGAlhfP01GRtW1hAtDbuF89ceksdjmdPT3mqh0wHV_F8lVrBRuD-pLiF9Rd56OTR8SLGC26OB2m7w9EI1CJr8GHDtMbs1FMCy2HzHYjW7FT0zlM1CvVl42rKKgtVDPTc_Y/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/AVvXsEgKzXNxrlN6pCwIFpCAYIYYWNZI1y5VYk-BugUGALzvvPpB-fqEdC5GFqzTVrh6mSLzPVTztMG-Lbv6BvGHIFINm1Vbs3D6whj4hpqCY6z18hklJG7wcfWvCv54eQ1EOmff6rgiFfaenFw/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/AVvXsEghiU-Leu9lZn5mrbGQW0-ZfKCCGKD3gZ3URFbo8PSbmHrsW0SsGjbS8HjbeK4AN5JMAxIrNn34Sq_Oull9v_zTssWZnmEl8E8xXN2qaLAXcwu9c_0AaqtZu1VH-N1nkhAjDwoq665vIx8/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/AVvXsEhFxi1qseyC5dk94k2hifFgfC1wZr23BPcbNbD7HB5JG_yLgtlcRCuObOPpeNRYTBCOZ3AzPvbQ-_RGT8MjZxshfAjcusjYwU8dLg4TCAXIbAUPw2wc0io8Q4rGe2pCkkP0vStZtiNlWTY/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/AVvXsEjqeOY22H7S-W5t-Rk7Htp9cFBnq_EW60Fe89ZWFxNEpJ1vihdd_W4usM2cC8lSFvuYdk1IGJ2blPpUyqiP8uF8LACYkgfj2u7HlBcFdMiR7DuCyh3_qnQzFE-1V9pO5Iyy_FzTZ3PuA9c/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 aba-aba script yang dibawah aba-aba ]]></b:skin> atau skip saja aba-aba itu, lalu lanjutkan dengan aba-aba yang kedua dan terakhir simpan template.
