Dengan adanya Widget Social Share untuk blog akan sangat memudahkan pengunjung bagi yang akan membagikan postingan kamu ke situs media sosial yang terkenal contohnya Facebook, Twitter dan lainnya. Apalagi widget tersebut dalam posisi melayang, pastinya pengunjung dapat lebih mudah dalam membagikan postingan kamu yang menarik.
Widget social share memang sangat populer di bandingkan dengan widget-widget lainnya, karena widget yang satu ini dapat meningkatkan jumlah postingan yang dibagikan ke facebook, twitter dan situs sosial media lainnya.
DEMO
Apakah kamu sudah melihat demonya, menarik bukan? Apabila kamu ingin memasangnya silahkan ikuti cara-caranya dibawah ini.
1. Buka Dashboard -> Tata Letak -> Add a Gatget
2. Pilih HTML/JavaScript
3. Copy dan paste kode dibawah ini ke dalam kotak HTML/JavaScript (untuk masalah judul kosongkan saja)
<style type="text/css">
#social-buttons {
position:fixed;
bottom:25%;
margin-left:-720px;
float:left;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:#fff;
padding:0 0 2px 0;
z-index:10;
}
#social-buttons .button-share {
float:left;
clear:both;
margin:5px 5px 0 2px;
}
</style>
<div id='social-buttons' title="Get this from kodelogger.blogspot.com">
<div class='button-share' id='like' style='margin-left:7px;'>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div>
</div>
<br /><div class='sbutton' style="margin-left: 2px;" ><a class='twitter-share-button' data-count='vertical' data-via='kodeblogger' expr:data-counturl='data:blog.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a><script src='http://platform.twitter.com/widgets.js'; type='text/javascript'></script>
<br />
<div class='button-share' style="margin-left: 3px;" id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='button-share' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='button-share' style='margin-left:3px;' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div style="clear: both;font-size: 9px;text-align:center;">Get <a style="color: #3399BB;" href="http://kodelogger.blogspot.com/">widget</a></div></div></div>Note:
- Ganti angka 25% sesuai keinginan. Semakin tinggi angka tersebut maka akan semakin ke atas penempatan widgetnya.
- Ganti angka -720px sesuai keinginan. Semakin tinggi angka tersebut maka akan semakin ke kiri penempatan witgetnya.
- Ganti huruf kodeblogger dengan akun twitter kamu.
4. Simpan
Sekarang coba lihat blog kamu, pastinya sudah ada widget tombol berbagi ke sosial media.
Apabila ada masalah silahkan berkomentar dibawah.