Cara Memasang Floating Share Button

Kumpulan Tip dan trik kali ini membahas bagaimana cara Memasang Floating Share Button  - Widget Floating Share Buttons ini berguna untuk menampilkan tombol berbagi yang tampil mengapung baik di kiri maupun di kanan sesuai kehendak Anda tinggal mengubah posisi left atau right. Anda bisa melihat demonya pada blog ini, terihat disini ada tombol share Facebook, Retweet, Buzz dan Google +1.

Bila  Anda tertarik untuk memasang Widget Floating Share Buttons ini silahkan ikuti tutorialnya di bawah ini.
1. Login terlebih dahulu ke akun blogger Anda.
2. Silahkan klik menu Rancangan atau Design. Pada  Elemen Laman Klik, Tambah Gadget.
3. Lalu, pilih "HTML/JavaScript". Sebaiknya kosongkan saja pada Judul Widget.
4. Lalu, Copy-Paste kode html dibawah ini kedalamnya

<style>
#pageshare {position:fixed; bottom:50%; margin-left:-799px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;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="Get this from ruditabuci.blogspot.com">
<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>

Untuk posisinya Anda bisa Mengaturnya pada tulisan yang berwarna biru.

5. Kemudian Save


Cukup sekian dahulu panduan kali ini, semoga berguna. 

Related Articles by Category