Share Facebook, Twitter, Google+ Melayang

Wednesday, October 10, 2012

Sejauh ini banyak tombol bookmark sosial seperti share facebook, twitter, google plus, digg dimanfaatkan untuk optimasi SEO (search engine optimization) pada blog. Sebab semakin banyaknya blog kita di share maka akan semakin meningkatnya blog kita diliat yang secara otomatis pula akan meraih poin untuk urusan SEO. Berikut ini Admin coba kreasikan berbagai kode CSS dan HTML untuk dimanfaatkan optimasi blog Anda.

Dan Tombol share ini melayang pada blog seperti halnya navigasi halaman (blog pager) melayang yang pernah Admin tuliskan sebelumnya.

#bookmark-share {
  position:fixed;
  top:10%;
  left:10px;
  float:left;
  border:1px solid black;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  background-color:#eff3fa;
  padding:0 0 2px 0;
  z-index:10;
}

#bookmark-share .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;
}

<div id='bookmark-share' title="Share This With Your Friends">
 <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>
 <br/>
 <div style="clear: both;font-size: 12px;text-align:center;">
  <a href="http://idtutorplus.blogspot.com/2012/10/share-facebook-twitter-google-melayang.html" target="blank">
   <font color="black">[Get This]<font></font></font>
  </a>
 </div>
</div>

Demo Live

Semoga bermanfaat

Pasang Iklan Anda di Sini

Pasang Iklan Anda di Sini