Cara Membuat Floating Share Button Di Blog | Share Artikel Blog

Cara Membuat Floating Share Button  – Membuat share artikel melayang (floating button) ini merupakan kelanjutan dari posting saya sebelumnya Cara Memasang Button Share Artikel di Blog. Bedanya kalau tombol share melayang ini hanya untuk berbagi artikel ke 4 layanan social bookmark saja yaitu share artikel ke Facebook, Twitter, Google Buzz dan Google Plus One ( +1 ). Yang penting bisa berbagi artikel postingan lah.
Baik sobat langsung saja nih cara memasang share button melayang di blog :
1.       Login ke dashboard blogger anda.
2.       Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).
3.       Copy script dibawah ini dan paste kedalam gadget baru tadi.
 
<style>
#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;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=”Get this code from rayhanzhampiet.blogspot.com”>
<div class=”sbutton” id=”fb”>
<a href=”http://www.facebook.com/sharer.php&#8221; name=”fb_share” type=”box_count”>Share</a><script src=”http://static.ak.fbcdn.net/connect.php/js/FB.Share&#8221; type=”text/javascript”>
</script></div>
<div class=”sbutton” id=”rt”>
<script src=”http://tweetmeme.com/i/scripts/button.js&#8221; type=”text/javascript”>
</script></div>
<div class=”sbutton” id=”gb”>
<a class=”google-buzz-button” data-button-style=”normal-count” href=”http://www.google.com/buzz/post&#8221; title=”post on google buzz”>
<script src=”http://www.google.com/buzz/api/button.js&#8221; type=”text/javascript”>
</script>
</a></div>
<div class=”sbutton” id=”gplusone”>
<script src=”http://apis.google.com/js/plusone.js&#8221; type=”text/javascript”>
</script>
<g:plusone size=”tall”></g:plusone></div>

</div>

4.       Save / Simpan.

Cara pemasangan widget pada template:
  1. Ganti/edit kode #pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left;dengan kode ini #pageshare {display:scroll;position:fixed;top:165px;left:30px;
  2. Login ke dashboard blogger, pilih Rancangan > Edit HTML
  3. Letakkan script widget tepat diatas kode   pada template.
  4. Save / Simpan.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s