Cara Membuat Widget Social Share Melayang

Salam blogger. Pada kesempatan kali ini saya akan berbagi cara membuat widget social share melayang seperti yang ada di kiri blog saya ini. Anda juga dapat menambahkan berbagai jenis social share lainnya, sesuai kebutuhan anda. Cara membuat social share melayang ini sangat sederhana. Silahkan disimak.

1. Masuk ke menu Rancangan - Tambah Gadget - Tambah HTML/Javascript

2. Copy dan pastekan kode di bawah ini.

<style type="text/css">
#pageshare {
  position:fixed;
  top:25%;
  left:0px;
  border-radius:0 5px 5px 0;
  -moz-border-radius:0 5px 5px 0;
  -webkit-border-radius:0 5px 5px 0;
  background-color:#fff;
  padding:0 0 2px 0;
  z-index:1000;
  box-shadow:0 0 2px rgba(0, 0, 0, 0.7);
  -moz-box-shadow:0 0 2px rgba(0, 0, 0, 0.7);
  -webkit-box-shadow:0 0 2px rgba(0, 0, 0, 0.7);
}
#pageshare .sbutton {
  float:left;
  clear:both;
  margin:5px 5px 0 5px;
}
.fb_share_count_top {
  width:48px !important;
}
.fb_share_count_top, .fb_share_count_inner {
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {
  width:49px !important;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
}
.FBConnectButton_Small .FBConnectButton_Text {
  padding:2px 2px 3px !important;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  font-size:8px;
}
</style>
<div id='pageshare' title="Share This With Your Friends">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' 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><br/></div>

3. Simpan dan lihat blog anda.
*Untuk kode yang berwarna merah adalah untuk mengatur posisinya apakah dikiri atas atau dikiri bawah, tinggal mengatur persentasenya saja.