Tombol Share FB, Twitter, Buzz, G+1 Melayang disamping Blog (position:fixed)
Bagaimana membuat tombol share Facebook, Twitter, Google Buzz dan G+1 dengan posisi (position:fixed) atau posisi tetap ditempat tidak bergerak) sama seperti halnya di postingan sebelumnya Cara Pasang G+1 (Google Plus One) di Pojok Blog, tapi kali ini admin akan share tentang cara pasang tombol share melayang di bagian samping blog yang sepertinya semakin populer karena posisinya pas mantap. contohnya seperti blog saya ini. ada disamping kiri postingan ini (seperti gambar dibawah ini)
Langkah-langkahnya sebagai berikut:
<css script>
<style>
#pageshare {position:fixed; bottom:25%; margin-left:-83px; 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="Sastra Blog">
<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>
</css script>
Catatan:
Jika Tombol share Google + 1 tidak muncul dan Agar Tombol Google + 1 nya bisa muncul di tombol share melayang itu, maka nonactivekan tombol share default Blogger yang ada pada bagian bawah postingan biasanya. karena scriptn share ini ini hanya akan membaca 1 saja, jika diactivekan tombol share bawaan google ini makan Google + 1 akan muncul di bagian bawah postingan saja. dia akan memilih salah satu saja yang akan active.
Langkah-langkahnya sebagai berikut:
- Login ke Blogger
- Design -->> Page Element
- Add Gadget -->> HTML/Javascript
- Copy lalu pastekan kode script share dibawah ini di form content-nya dan Save
- Nilai pada bagian teks: bottom:25% ; margin-left:-83px bisa diganti sesuai keperluan dan bentuk tampilan Blog (bisa ditambah atau dikurangi nilainya).
<css script>
<style>
#pageshare {position:fixed; bottom:25%; margin-left:-83px; 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="Sastra Blog">
<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>
</css script>
Catatan:
Jika Tombol share Google + 1 tidak muncul dan Agar Tombol Google + 1 nya bisa muncul di tombol share melayang itu, maka nonactivekan tombol share default Blogger yang ada pada bagian bawah postingan biasanya. karena scriptn share ini ini hanya akan membaca 1 saja, jika diactivekan tombol share bawaan google ini makan Google + 1 akan muncul di bagian bawah postingan saja. dia akan memilih salah satu saja yang akan active.
0 comments:
Post a Comment
Terima Kasih telah memberikan komentar disini
Info Jasa kami, klik http://www.grahaDesignstudio.com
Phone :
081332333372 - 087833396980
email :
cs@grahadesignstudio.com