Cara Membuat Share Button Terapung (Floating)

Di era kejayaan media sosial dewasa ini, sebagai pemilik blog, rasanya kok 'rugi' kalau kita tidak menyediakan fasilitas tombol share yang memudahkan bagi pembaca blog kita untuk berbagi tulisan kita. Karena efek domino dari aktivitas sharing seperti ini telah terbukti di website lain yang saya asuh, menjadi sumber datangnya trafik yang cukup signifikan. Nah, kali ini saya akan berbagi ilmu cara memasang floating share button (terjemahan bebasnya: tombol berbagi terapung). Mau?

Ikuti cara-caranya. Meskipun langkah-langkah ini untuk platform blogger/blogspot, namun kode-kodenya bisa dipakai untuk website/blog apapun.

Begini caranya:

  1. Login ke akun Blogger Anda lalu klik Design.
  2. Klik pada Add A Gadget yang ada di sidebar atau footerbar.
  3. Kemudian pilih HTML/Java Script.
  4. Copy dan paste kode di bawah ini ke dalam kotak box HTML/Java Script tadi, lalu Simpan.

<style>
/*------- Share Button Terapung Indobloger ------------*/
#floatdiv {
  position:fixed;
bottom:15%;
margin-left:-70px;
z-index:10;
float:left;
padding-bottom:2px;
}
#indoblogersidebar {
background:#fff;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding-left:5px;
width:60px;
margin:0 0 0 5px;
}
.fb_share_count_top {width:52px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !important; -moz-border-radius:3px;/*bs-fsmsb*/-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="floatdiv">
<div id="indoblogersidebar">
<table cellpadding="1px" cellspacing="0">

<tr>
<td style="padding:5px 0px 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</td>
</tr>
<tr>
<td style="padding:5px 0 2px 0;">
<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>
</td>
</tr>
<tr>
<td style=" padding:5px 0px 0px 0px;">
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>
<g:plusone size="Tall" expr:href="data:post.url">
</g:plusone></td>
</tr>
<tr>
<td>
<p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><a style="color:#D3D3D3;" href="http://www.indobloger.com/2012/03/cara-membuat-share-button-terapung.html">Get Widgets</a></p>
</td>
</tr>
</table>
</div>
</div>


Anda dapat merubah warna background dari widget tersebut, caranya cari kode: background:#fff; yang ditandai dengan warna pink, lalu ganti kode hexadesimal (#fff) sesuai selera Anda.

Widget ini secara default terletak di kiri, kalau Anda ingin memindahnya ke kanan cari kode: margin-left:-70px; yang ditandai warnai kuning dan turunkan nilainya untuk memindah ke kanan. Anda bisa bereksperimen lebih lanjut.
Gampang kan...?!