Cara Membuat Tombol Share Warna-warni

Kali ini Saya akan memberitahu Cara Membuat Tombol Share Warna-warni.
Biasanya tombol share yang dibuat itu berupa widget, tapi sekarang bentuknya seperti widget tapi tidak dipasang satu-satu melainkan digabung menjadi satu dan rapih. Contohnya seperti di bawah ini.

Cara membuatnya ada di bawah ini :

• Login ke blogger.com
• Pada dashboard pilih Template → Edit HTML
• Cari kode ]]></b:skin> dengan cara tekan tombol F3
• Setelah itu letakkan script di bawah ini di atas kode ]]></b:skin>

#share-button-lanonadio {margin:0 0 8px;padding:0;overflow:hidden;}
#share-button-lanonadio p {float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);background:#eaeaea;font-color:#000;display:block;padding:5px 8px !important;margin:0 3px 3px 0;border-radius:6px 6px;border:1px solid #fff;}
#share-button-lanonadio a {position:relative;float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);border-radius:6px 6px;display:block;color:#fafafa;padding:5px 8px;margin:0 3px 3px;border:1px solid #fff;}
#share-button-lanonadio a:hover {top:1px;left:1px;box-shadow:0px 0px 3px rgba(1,1,1,.1);}

• Setelah itu cari kode <data:post.body/>
• Letakkan script di bawah ini di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='clear'/>
<div id='share-button-lanonadio'>
<p>Share On</p>
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' style='background:#3b5998;' target='_blank' title='Facebook'>Facebook</a>
<a class='facebook' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' style='background:#c0361a;' target='_blank' title='Google+'>Google+</a>
<a class='twitter' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' style='background:#4099ff;' target='_blank' title='Twitter'>Twitter</a>
<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' style='background:#1BE105;' target='_blank' title='StumbleUpon'>StumbleUpon</a>
<a class='linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' style='background:#3b5998;' target='_blank' title='LinkedIn'>LinkedIn</a>
<a class='twitter' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://digg.com/submit?url=http://www.erjud-chayob.com/2013/03/tombol-share-lintas-me-modified.html&amp;title=Tombol Share Lintas Me Modified' rel='nofollow' style='background:#000000;' target='_blank'>Digg</a>
<!-- script begin here -->
<script>
//<![CDATA[
var uri = window.location.href;
var ttle = document.title;
document.write("<a href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' rel='nofollow' style='background:#FF9900;'>Lintaskan</a>");
//]]>
</script>
<!-- End script -->
<div class='clear'/>
</div>
</b:if>

Perhatian :

• Kode <data:post.body/> bisa sampai tiga kodenya, cobalah satu-persatu, jika tombol share masih belum muncul.

Selamat Mencoba dan Semoga Bermanfaat !

Sumber