Cara Memasang Tombol Share Melayang

Beberapa widget yang harus dipasang pada blog memang perlu dan tidak sebatas modifikasi saja, karena bertujuan untuk mempercantik blog, SEO, maupun mempermudah pengunjung blog. Salah satu widget yang wajib untuk dipasang adalah Tombol share dan Google Custom Search Engine, entah itu dipasang pada postingan, HomePage atau disetiap halaman.

Membahas cara memasang tombol share melayang pada blog, jika blog anda telah menggunakan tombol share, sebaiknya ganti dengan tombol share yang saya bagikan berikut ini, karena posisi dan letak tombol share berikut ini nyaman dilihat dan tidak mengganggu pengunjung blog anda.

Cara memasang  Timbol Share Melayang

1. Buka Blogger.com , lalu pilih Tata Letak

2. Klik Add Widget
3. pilih  HTML/ JavaScript
kemudian masukkan kode di bawah ini :

<style>
#pageshare {
position:fixed; bottom:15%;
left:10px; float:left;
border: 3px solid #009900;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:transparent;
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;
-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="Bagikan:">
<div class='sbutton' id='gb'>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like layout="box_count" show_faces="false" font=""></fb:like>
</div>
<div class='sbutton' id='rt'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script>
</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='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></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='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>

4. langkah terakhir jangan lupa untuk menyimpan.


Jika anda ingin memodifikasinya, anda harus mengetahui Kode Warna, tujuannya agar dalam memodifikasi tombol share melayang tidak terjadi kesalahan.

Selamat mencoba!