Memasang Tombol Floating Share pada Blog

[Z-Xp] Pada kesempatan malam hari ini saya akan share tentang Memasang Tombol Floating Share pada Blog. Memang tombol share ini tidak jauh berbeda dengan tombol share biasanya, yaitu share konten/artikel blog kita ke website jejaring sosial.

Hanya saja berbeda tombol yang satu ini tetap melayang di samping kiri blog anda, sebagai contoh apabila anda scroll ke bawah tombol floating share ini mengikuti ke bawah. Kesempatan untuk diklik oleh para pengunjung dengan tujuan sharing akan semakin besar. Dalam Tombol share tersebut mencakup tiga layanan, yaitu: Google plus, facebook, sama twitter/retwit. Untuk Demonya silahkan klik disini.

Bagi anda yang tertarik untuk mencobanya silahkan ikuti langkah-angkah di bawah ini :

1. Login ke Blogger.
2. Pada dasbor klik "Rancangan".
3. Klik "Add Gadget" dan pilih "HTML/Javascript".
4. Paste kode dibawah ini ke dalam kotak "HTML/Javascript"

<!-- floating page sharers Start by Z-XP -->
<style type="text/css">
#pageshare {position:fixed; bottom:5%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background:transparent;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:right;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="Share to Your Friends">
<div style="clear: both;font-size: 16px;text-align:center;">
</div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div class='sbutton' id='fb'>
<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>
</div>
<div class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>
<!-- floating page sharers End by Z-XP --></div>

6. Simpan dan lihat hasilnya.

Untuk Demonya silahkan klik disini.
Selamat Mencoba