Widget Share Button Melayang

floating share button

Tambahkan sebuah elemen halaman HTML/JavaScript. Salin kode ini, kemudian letakkan di dalam formulirnya:

<style type="text/css">
#pageshare {
  position:fixed;
  top:25%;
  left:0px;
  -webkit-border-radius:0 5px 5px 0;
  -moz-border-radius:0 5px 5px 0;
  border-radius:0 5px 5px 0;
  background-color:#fff;
  padding:0 0 2px 0;
  z-index:1000;
  -webkit-box-shadow:0 0 2px rgba(0,0,0,0.7);
  -moz-box-shadow:0 0 2px rgba(0,0,0,0.7);
  box-shadow:0 0 2px rgba(0,0,0,0.7);
}

#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 {
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {
  width:49px !important;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}

.FBConnectButton_Small .FBConnectButton_Text {
  padding:2px 2px 3px !important;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  font-size:8px;
}
</style>

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

     <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>

Klik Simpan, maka kamu akan mendapatkan hasil tampilan seperti ini:

Lihat Demo

3 Komentar

  • Anonim

    mas mau tanya, misal kita ingin buat sendiri widget share terus cara nyari tahu alamat sharenya kya gmana yah. misal klo facebook kan alamat sharenya di http://www.facebook.com/sharer.php nah

  • Taufik Nurrohman

    @sahadena Biasanya sih dari data XML Blogger: data:post.sharePostUrl. Saya kurang tahu cara merancangnya.

  • Unknown

    mas buatin yang baru dong tuh dah banyak yg eror buatin yg bagus yaks :D

Komentar telah ditutup.