Cara Membuat Floating Share Buton

Tweet

Share

Najibblog, Ok sobat, setelah posting tentang Disabilitas dan Pandangan Masyarakat, kali ini saya akan posting tentang Cara Membuat Floating Share Buton, Buttonnya terdiri dari Facebook, Twitter, Digg dan GooglePlus, dan untuk lebih jelasnya silahkan lihat gambar dibawah berikut ini :

Floating Share Button

Oke, langsung saja ke TKP :
Langkah 1 :
Login ke Dashboard => Layout => Add Gadget => HTML
Langkah 2 :
Lalu paste kan kode berikut ini :

<!-- floating page sharers Start -->
<style>
#pageshare {position:fixed; bottom:17%; margin-left:-705px; float:left;
-moz-border-radius:5px 0px 5px 0px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:0px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:0px;
background-color:#ffffff;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="Share this">
<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>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div></div>

Langkah 3 :
Klik Save, dan lihat hasilnya.
Bagaimana? Bagus kan? Itulah Cara Membuat Floating Share Button, semoga bermanfaat ya. Jangan lupa komentarnya dan kalau boleh minta dukung aku dikontes SEO Disabilitas dan Pandangan Masyarakat ya. Terimakasih.. :D

Subscribe To Get FREE Tutorials!

Related Post: