Cara Mudah Membuat Social Share Melayang

Tombol Social Share ini terdiri dari Google Plus, Like Facebook, Twitter secara melayang. Jika sobat memasang tombol social google plus dan social share yang lainnya secara melayang, bisa menghemat ruang halaman blog sobat dan bisa memudahkan para visitor kita menshare atau memberi google plus+ pada artikel blog kita.

pada tutorial kali ini, Putupunyablog mau berbagi sama temen-temen bagaimana membuat salah satu widget share button melayang di sisi kanan blog. Widget kali ini dilengkapi tombol suka dan share Facebook, Tweet, dan Google+1 termasuk perhitungannya alias berapa banyak pengunjung yang membagikannya. Cara pembuatannya sangat mudah, karena tidak perlu mengedit CSS atau menambahkan kode HTML. Berikut ini adalah langkah-langkah cara pemasangan tombol share button melayang:

1. Langkah pertama masuk ke akun blogger > Dasbor, > klik design/rancangan > Tata Letak
2. Klik Tambah Gadget, di bagian sidebar.
3. Pilih HTML/Javascript, kemudian masukkan kode di bawah ini:

<!--Widget Share Button Melayang Start-->
<style>
#pageshare {position:fixed; bottom:10%; right:8px; float:left; border: 1px solid white; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#000000;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;-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="Update status di facebook">

<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='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='fb'><a name="Bagikan Ke Teman Anda" 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><br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://putupunyablog.blogspot.com/2012/05/cara-mudah-membuat-social-share.html" target="Pasang Widget"><font color="red">PASANG<font></font></font></a></div></div>
<!--Widget Share Button Melayang End-->

Pengaturan lihat kode-kode warna merah:

angka 15% mengatur letak tinggi posisi share button dr sisi bawah blog, silakan dikurangi jika posisinya ingin diturunkan

angka 10 pixel adalah posisi dari tepi paling kanan blog, ditambah jika sobat ingin mengetengahkan.

sedangkan border: 1px solid white, adalah ukuran ketebalan batas kotak share button dan warna batas/garis share button itu sendiri. Semoga bermanfaat.