Image by Febz - Edit Image Cara membuat floating share button di blog | Shattered Stories ~ Shattered Stories

Pages

Selasa, 26 Juni 2012

Cara membuat floating share button di blog | Shattered Stories


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" name="fb_share" type="box_count">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="gb">
<a class="google-buzz-button" data-button-style="normal-count" href="http://www.google.com/buzz/post" title="post on google buzz">
<script src="http://www.google.com/buzz/api/button.js" type="text/javascript">
</script>
</a></div>


<div class="sbutton" id="gplusone">
<script src="http://apis.google.com/js/plusone.js" type="text/javascript">
</script>
<g:plusone size="tall"></g:plusone></div></div>

4. Save / Simpan.

Cara pemasangan widget pada template:


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;
Login ke dashboard blogger, pilih Rancangan > Edit HTML
Letakkan script widget tepat diatas kode pada template.
Save / Simpan.

Sumber : http://dzikrihapmi.blogspot.com/

Tidak ada komentar:

Posting Komentar

 

Image by Febz - Edit Image