Cara Membuat Floating Share Button

Floating share button

atau tombol berbagi adalah salah satu widget yang sangat dianjurkan untuk dipasang di blog sobat. Setelah memudahkan pengunjung dengan memasang fitur related posts di sidebar, menambahkan breadcrumbs navigation dan juga widget recent posts sehingga sobat bisa meningkatkan pageview maka berilah kesempatan kepada pengunjung blog sobat untuk membagikan artikel favorit mereka.

Dengan memasang floating share button atau tombol berbagi ini bisa memudahkan pengunjung untuk membagikan artikel sobat ke social media ataupun social bookmark plus dapat bonus backlink.


Sebenarnya share button
ini sudah disediakan oleh blogger akan tetapi tampilannya yang super biasa membuat share button bawaan blogger ini kurang bisa menarik minat pengunjung. So kali ini kita akan mencoba untuk membuat floating share button (melayang).

Keuntungan floating share button

Floating share button atau tombol berbagi melayang ini mempunyai beberapa kelebihan, salah satunya adalah share button ini tidak hanya berada di halaman artikel sehingga sobat juga bisa mempromosikan homepage blog sobat dengan floating share button ini.

Cara membuat floating share button

1. Seperti biasa login dulu di blogger.


2. Pilih Rancangan (Design) > Edit HTML > Centang Expand Template Widget.


3. Kita taruh dulu kode css-nya, cari  ]]></b:skin> kemudian copast kode berikut:
   

   
   #sharebutton {
background-color:#FFFFFF;
border-color:#C1CDCD;
border-style:solid;
border-width:1px;
left:5px;
bottom:150px;
margin-top:10px;
position:fixed;
width:64px;
}
#sharebutton .float {margin:7px}
.FBConnectButton_Text
{
font-size: 8px;
padding:2px 4px 3px !important;
}



4. Tulisan yang berwarna merah bisa sobat sesuaikan sendiri. Jika sudah cari kode </body> dan copast kode berikut ini tepat diatasnya
   

   
<div id='sharebutton'>
<div class='float'>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>
<div class='float'>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
<div class='clear'/></div>
<div class='float'>
<a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='Post on Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/>
</div>
<div class='float'>
<script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/> </div>
</div>



5. Save dan lihat hasil membuat floating share button sobat.

Sekian tutorial

membuat floating share button (tombol berbagi yang melayang)

semoga bermanfaat. Kalau ada teknik yang lebih oke boleh donk saya dikasih tau hehehe...