Cara Membuat Button Share Melayang Di Blogspot

Cara Membuat Button Share Melayang Di Blogspot

B utton share atau juga tombol untuk berbagi ini jika sudah terpasang dalam halaman blog sobat maka akan terlihat melayang baik di kiri ataupun di kanan layar, sesuai dengan judul postingan ini yah !, yakni cara membuat button share melayang 

maka hasil dari pembuatannya akan menampilkan button share ini menjadi terlihat melayang. Adapun tombol-tombol yang akan tampil untuk berbagi ini diantaranya adalah seperti G+, Facebook dan juga twitter.

Dengan adanya button share ini akan semakin memudahkan para pengunjung situs sobat untuk membagikan artikel yang mereka sukai tersebut melalui ke tiga media yang tersedia tersebut, 

entah itu melalui G+, facebook atau juga melalui twitter. Sementara cara membuat button share melayang di blogspot sendiri caranya adalah sebagai berikut.

Cara Membuat Button Share Melayang Di Blogspot

1-Login kedalam dasbor blog

2-Pilih Tata letak

3-Pilih tambah gadget/ add a gadget

4-Pilih HTML/JavaScript

5-Copy paste sederet kode yang ada di bawah ini kedalam gadget HTML/JavaScript

6-Pilih simpan gadget dan selesai !.

<style>

#pageshare {position:fixed; bottom:20%; right:5px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;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="share it to your friends">
<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='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>

Untuk merubah tampilan lebar serta tingginya, silahkan sobat ubah masing-masing jumlah angka pada kode yang berwarna merah

Kurang lebih nanti hasil dan penampilannya akan terlihat seperti pada gambar diatas, simple tetapi tetap powerfull ^^ . okelah, demikian saja cara membuat button share melayang di blogspot selamat mencoba dan bye-bye...