Cara Buat Tombol Share

by fahmi 23.31 0 komentar Tutorial Blogger

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.

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>

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;'/> </div>
Copy code dibawah ini dan paste tepat 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/AVvXsEhSiwxa3IUNizQZAh6ssnmP4Ccm6x3cdOVY1uItqe39XHTFiZQpLRqHh2sWBzQOg-Eg-UvcNFG3FIbRU8vrnjClPbetAlvN75GPQDWQAh9Z8MYS3G1Ku9blYL_Og6k_kMijpT3b0TcQNdE/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/AVvXsEhHtznkQ_jwR6eTN1DoQrbzxD1EW8o3BlgNnRPr6_WdgLMq3it7ErnwQEzuPkd1ZcHr3l3jarUpGPjJTgJuwZ3w_-TO_PQ3KVTOx1fYxwKzrursUm5sjxIIa3oIUyOwcJVvsMezztO3j5E/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/AVvXsEjXTrzGb1fRe5jV3Qi5RwMqdLuPIMN2mI6SFe39xVthFXUGeZsogdqwB1bkmqVXEQ7BR456y6T4Uds_fAfOx_CihIl8wI4h710EHdNQxajGBzUcBCbFlk0dlOr0XsSL_n44a65kKAViiPY/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/AVvXsEg5Ev64JWM34ezUhKrHVxQABVrLRn9Xzmh7F99y3sk9Js6J1bpr3t_VOJBWVXMb_RODILmr2gt9IrzCBbmmnlPbRMb8jjYLxMlpDPHQ66DReTzHfRYeAN8jzfld6BKtKQvfYNmI-0QWy54/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/AVvXsEgL6Ut1c5LuBl1peWLHuH0DvAX89c4tPEwonf453MatigF6nz-lrMIB4Ok0Z-YTp9BQrzvJ-OVdJeE75kFsv6YWqwxlbdspGlx0_HGkqSE-OlESj7GPSF_xBjbzfpj34QPUbif3vgCUKfI/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/AVvXsEhMhIAB_3GsfXir4AfljPc_34iQLNnWJufMM8NhvIriLfJJ6f0Wm31Jums90_pufpV5vD8h9e-CbQpMHJOPF5IZWtRPKbDdGv1aw2ETZQWuOmXzURJH0JuHPK3b2JkbrXpmGT0JSAxJWn8/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/AVvXsEg2j0sIsinlkCxxJ0BiJPozIFWtKa4KLS-wVkJaCczTqxZsEnWG2CvRWL9hipIc8_QXsT6O9HO6nUE37iLvfFi917eFV61Rtaw3co6QPdsZ0zx0ivw1deq0kk3xegrUMTAlmkVOT1KXS1I/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/AVvXsEigZvs04Q_QH5iW83qoHmNGyExenRQENtgAFm9kObMOL4crKf2H-8WqgUqjiq1q0cn3W2PcAQ_w3qNlylouEyIYXTrUflb3yQxna5kqM_CIU15r_UYHtWxAf8B9mn2rGRLJOsXrlkHHgjA/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/AVvXsEhR6KdmZgIe6W9XvxgJ-LlCPCIL9J0yFeJh5wis3zOu3pqgX5zmXJXCDy88GU2CctC4fCjCpq01qIMUe_bKnEUhdTGb2nwQBvPkdT7ZdpZUYIMP50KHRe9m7pTHPJd6OB1PfUtRGvjiaj4/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/AVvXsEhxJa6Ink4-_U76AROLrxAoqONyVngWlFJynJCynPj6jOZ0ac94PjPmRTuIuMeioluOxV7PORsqdY2LXuscnNg93kYvao1VhHIDoL17aC1jCA_xpamcxPHLTHq5IJ4aLu9JHXF9rAc2OKI/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/AVvXsEiA-WdQy21V87cfRFTOPTgH93cZ05qlpKxuxzhrIzOOvlo7YEYNEOflclhs8XUsjjqud9Hr09csu_1ttQDQzfvXvB04tlBOBLaX12ZJuHBGeLmiXXqTz6eVTzE52-usyc7-YTB6YUcZfnM/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/AVvXsEgKzSqUE4wQ-whkZgeXAubZqhKH1m5C25R3kTwPui0y6IYBxLr5g9pGitNIqfy6t5eHib6ZFwpH8FQ-Yu2wNvo9kBg9ExYV0pW89mb9dk16PfLsHNBhGq8QgkG4G5wUr1DhZ-sAlL1q9Fc/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

PENTING: SETELAH KEMARIN GOOGLE CHROME MELAKUKAN UPDATE, TOMBOL SHARE DENGAN EFEK NUDGING INI TIDAK DAPAT BEKERJA DENGAN BAIK KALAU DIBUKA MENGGUNAKAN BROWSER GOOGLE CHROME. SARAN SAYA, LEBIH BAIK GUNAKAN TOMBOL SHARE INI TANPA EFEK NUDGING DEMI KENYAMANAN PEMBACA BLOG ANDA.

CARANYA: Jangan memasang kode script yang dibawah kode ]]></b:skin> atau skip saja k

Hello

Muslim Share

Cara Buat Tombol Share

fahmi

0 komentar:

Posting Komentar

RADIO ISLAM INDONESIA

Translate

Download Now :

Rasyid

Popular Posts