Cara Membuat Widget Tombol Share Warna-Warni untuk Website atau Blog

Punya website atau blog jarang ada orang yang share artikel atau apa pun yang ada di dalam website kita. Tenang, caranya sekarang mudah supaya ada orang yang mau share konten yang ada pada website milik kita. Caranya membuat tombol share berupa widget yang bisa diletakkan dimana saja, tetapi rekomendasi letakkan di bawah artikel. Berikut ini Cara Membuat Widget Tombol Share Warna-Warni untuk Website atau Blog.

• Hal yang perlu kalian lakukan cari kode ]]></b:skin> atau <style> dengan cara tekan tombol F3 dan ketik kode tersebut.
• Setelah itu letakkan script di bawah ini di atas kode ]]></b:skin> atau di bawah kode <style>.

#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/> (untuk blog berupa blogspot)
• Letakkan script di bawah ini di bawah kode <data:post.body/> atau letakkan secara bebas di mana posisi yang menurut kalian enak dipandang (rekomendasi di bawah artikel).

<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/> ada tiga kode, coba cari satu-persatu dan letakkan di bawahnya jika tombol share masih belum muncul.