Membuat Widget Sosial Share Melayang di Sebelah Kiri Artikel

Pada kesempatan kali ini saya akan membagikan hal yang sudah tidak asing lagi di mata anda para blogger yang sudah lama menggeluti dunia blogging. Ya tepatnya tombol share. Tombol share ini sangat berpengaruh juga untuk mendatangkan pengunjung blog dari sosial media contohnya seperti facebook, g+, dan lainnya.

Mungkin saja telah banyak yang mengetahui cara ini. Tetapi bagi yang belum tau, saya rasa tips ini tepat untuk anda yang sedang membutuhkannya. Bisa anda lihat gambar di atas, yup saya menaruhnya di sebelah kiri artikel blog yang perlahan muncul dari bawah, agar lebih kelihatan menonjol bagi para pembaca.

Simak sebagai berikut.

1. Login Blogger

2. Tata Letak

3. Simpan kode di bawah ini ke dalam Widget HTML

<style>
#farhanwebbtnshare {position:fixed; bottom:20%; left:10px; float:left; background-color:#fff;padding:0 0 2px
0;z-index:10;box-shadow:0 2px 2px #666;-webkit-box-shadow:0 2px 2px #666;border-radius:4px;-webkit-border-radius:4px;border: 1px solid #ddd;moz-animation:bawah 7s;-webkit-animation:bawah 7s;animation:bawah 7s;}
#farhanwebbtnshare .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 {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
@media screen and (max-width:480px){#farhanwebbtnshare{display:none;}}
@-webkit-keyframes bawah{
from{transform:translate(0px, 2000px)}
to{transform:translate(0px,0px)}
}
@keyframes bawah{
from{transform:translate(0px, 2000px)}
to{transform:translate(0px,0px)}
}
</style>
<div id='farhanwebbtnshare' 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='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='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>

Sekian
Semoga bermanfaat.