Cara Membuat Tombol Float Share Facebook dan Twitter (Melayang)

Tombol share biasanya ada di bawah atau di atas posting, pada tulisan kali ini kita akan membahas cara membuat widget Tombol Share melayang / Float di blog. Yaitu tombol share untuk facebook, twitter dan google plus. Berikut cara membuatnya:

-Login ke Blogger
-Pilih Rancangan >> Elemen Laman
-Tambah gadget >> Pilih HTML javascript
-Copy paste kode di bawah ini pada form HTML/Javascript yang telah terbuka tsb.

<style>
#pageshare {position:fixed;_position:absolute;bottom:25%; left:10px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:1px;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;/*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="pageshare" title="rufiono">
<div class="sbutton" id="fb">
<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">
</script></div>

<div class="sbutton" id="rt">
<script src="http://tweetmeme.com/i/scripts/button.js" type="text/javascript">
</script></div>

<div class="sbutton" id="gb">
<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">
</script>
</a></div>

<div class="sbutton" id="gplusone">
<script src="http://apis.google.com/js/plusone.js" type="text/javascript">
</script>
<g:plusone size="tall"></g:plusone></div>
</div>

-Kemudian Simpan, Selesai.

Keterangan script:
Untuk merubah posisi tombol silakan ganti tulisan yang berwarna merah di atas:
bottom:25%; artinya jaraknya 25% dari bawah
left:10px  artinya jarak dari sisi kiri 10px

Silakan lihat hasilnya, cukup sekian tulisan kali ini, semoga bermanfaat

Sharing via:

Tweet