Memasang Tombol Share Melayang - Floating Share Button.
Tombol
share melayang sebenarnya tidak beda dengan tombol share lainnya, yaitu
berfungsi untuk membagi/share konten blog ke berbagai jejaring sosial
yang ada di internet. Bedanya, tombol yang satu ini posisinya melayang
di blog kita, jadi walau pengunjung melakukan scrolling, tombol share
tersebut akan tetap kelihatan di samping blog kita, sebagai contohnya,
silahkan lihat di sebelah kiri. Tentu dengan posisinya yang melayang
itu, kesempatan untuk diklik oleh para pengunjung dengan tujuan sharing
akan semakin besar. Dalam Tombol share tersebut mencakup tiga layanan,
yaitu: Google plus, facebook, sama twitter/retwit.
Bagi sobat Blogger yang tertarik untuk menampilkannya ke dalam blog sobat silahkan gunakan kode berikut, caranya:
1. login ke blogger
2. Pilih Rancangan
3. Lalu "add gadget"
4. Pilih HTML/Javascript
5. isikan dengan kode berikut di dalamnya
Silahkan lihat hasilnya! Menarik bukan?
Semoga bermanfaat :D
Jika ada pertanyaan silahkan ditinggal di kotak komentar
Bagi sobat Blogger yang tertarik untuk menampilkannya ke dalam blog sobat silahkan gunakan kode berikut, caranya:
1. login ke blogger
2. Pilih Rancangan
3. Lalu "add gadget"
4. Pilih HTML/Javascript
5. isikan dengan kode berikut di dalamnya
<!-- floating page sharers Start-->
<style type="text/css">
#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="Share to Your Friends">
<div style="clear: both;font-size: 16px;text-align:center;">
</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 class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>
<!-- floating page sharers End --></div>
6. Klik simpan<style type="text/css">
#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="Share to Your Friends">
<div style="clear: both;font-size: 16px;text-align:center;">
</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 class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>
<!-- floating page sharers End --></div>
Silahkan lihat hasilnya! Menarik bukan?
Semoga bermanfaat :D
Jika ada pertanyaan silahkan ditinggal di kotak komentar
0 Response to "Memasang Tombol Share Melayang - Floating Share Button."
Post a Comment