Cara Membuat Social Share 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.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

Anda sedang membaca artikel tentang Cara Membuat Social Share Melayang. Anda bisa bookmark halaman ini dengan URL http://rujakcemil.blogspot.com/2012/06/cara-membuat-social-share-melayang.html. Jika Anda menyukai Artikel di blog ini, Silakan masukkan email Anda di bawah ini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit.