Cara Membuat Social Share Button Di Bawah Posting

Cara Membuat Social Share Button Simple. Sobat blogger. Widget social share button atau tombol berbagi artikel ini bisa di bilang sangat penting untuk kemajuan blog yang anda kelola dan hal ini bisa mendatangkan ribuan pengunjung yang bisa saja ingin membaca artikel yang di bagikan, karena jika pengunjung blog kita menyukai artikel yang mereka baca dan ingin berbagi artikel tersebut di media socialnya maka widget share button inilah yang berfungsi otomatis membagikan ke media social seperti Facebook,Twitter,Google+ dll.

Maka jika pengguna media social yang lain melihat artikel yang di bagikan dan penasaran ingin membacanya,bisa dengan mudah untuk membuka link tersebut dan mengunjungi blog anda. Untuk itu saya disini ingin berbagi tutorial tentang bagaimana cara membuat tombol berbagi atau share button yang bisa anda terapkan di blog anda.

Cara Membuat Social Share Button

1. Buka akun blogger anda.
2. Pilih template dan klik "Edit HTML"
3. Selanjutnya letakan kode dibawah ini tepat diatas kode </style> atau ]]></b:skin>

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

4. Sekarang letakan kode di bawah ini tepat di bawah kode <data:post.body/>

 <div id='share-button'>
<p>Share to : </p>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' style='background:#3b5998;'>Facebook</a>
<a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' style='background:#c0361a;'>Google+</a>
<a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;lang=id&quot;' rel='nofollow' style='background:#4099ff;'>Twitter</a>
<a expr:href='&quot;http://digg.com/submit?url=&quot; + data:blog.url' rel='nofollow' style='background:#000;'>Digg</a>
<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>
<div class='clear'/>
</div> 

Keterangan :
Kode <data:post.body/> biasanya lebih dari satu, silahkan coba satu persatu simpan di bawah kode tersebut hingga widget social share buttonnya muncul tepat di bawah posting.

Atau jika ingin lebih mudah, silahkan anda simpan di atas widget related posts atau artikel terkait.
jika sudah clear silahkan save template anda.

• Demo