Pages

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...?!

10 komentar:

  1. Ternyata gampang banget setelah mengikuti instruksi di atas. Makasih indobloger...

    BalasHapus
  2. makasih nie bang. saya bisa coba. tenkyu ya.

    BalasHapus
  3. Makasih gan infonya, membantu sekali.

    BalasHapus
  4. makasih gan... ternyata gini toe caranya... baru tau saya... maklum masih newbie...

    BalasHapus
  5. makasih infonya bang. visit back ya ?

    BalasHapus
  6. Makasi bro infonya sekarang web ane udah ada share melayangnya hehehhe. sip

    BalasHapus
  7. jadi lebih seru blog nya, saya coba dulu ya
    thanks sob

    BalasHapus
  8. mampir di blog saya n follow ya gan, thanks

    BalasHapus