Cara Memasang Tombol Share Melayang

Beberapa widget yang harus dipasang pada blog memang perlu dan tidak sebatas modifikasi saja, karena bertujuan untuk mempercantik blog, SEO, maupun mempermudah pengunjung blog. Salah satu widget yang wajib untuk dipasang adalah Tombol share dan Google Custom Search Engine, entah itu dipasang pada postingan, HomePage atau disetiap halaman.

Memasang tombol share pada blog sebaiknya diletakkan pada posisi yang mudah dijangkau pengunjung, tujuannya agar pengunjung tertarik untuk menggunakan widget tersebut dan tentunya mendatangkan traffic dan memperbanyak share blog dan artikel milik anda, tidak hanya itu, konten anda juga harus Relevan agar pengunjung blog anda betah.

Membahas cara memasang tombol share melayang pada blog, jika blog anda telah menggunakan tombol share, sebaiknya ganti dengan tombol share yang saya bagikan berikut ini, karena posisi dan letak tombol share berikut ini nyaman dilihat dan tidak mengganggu pengunjung blog anda.

Copy kode berikut ini:

<style>
#pageshare {
position:fixed; bottom:15%;
left:10px; float:left;
border: 3px solid #009900;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:transparent;
padding:0 0 2px 0;
z-index:10;}
#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 {
-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;
}
</style>

<div id='pageshare' title="Bagikan:">
<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='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='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</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>
<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>
<br />
<div style="clear: both;font-size: 12px;text-align:center;">
<a href="http://afowles.blogspot.com/2013/06/cara-memasang-tombol-share-melayang.html" target="blank"><font color="black">Get this<font></font></font></a></div></div>

Sekarang buka blogger.com, Tata Letak, Add Gadget kemudian pilih HTML/JavaScript dan Paste kode diatas, klik Simpan.
Jika anda ingin memodifikasinya, anda harus mengetahui Kode Warna, tujuannya agar dalam memodifikasi tombol share melayang tidak terjadi kesalahan.
Selamat mencoba!