Membuat Tombol Share Statis Di Samping Halaman

Written By Rey on Kamis, 01 Maret 2012 | 04.16

Mau membuat tombol share yang statis di samping halaman blog sobat? Maksudnya tombolnya diam ditempat ketika halaman di scroll ke bawah. Rey berikan kode nya, tinggal disisipkan di blog Sobat. Tombol yang ini menurut Rey bentuknya seksi dan nyentrik (versi saya). Tidak usah repot-repot membuat satu per satu dari google, twitter, dan facebook. Yang Rey berikan cukup komplit. Ada tombol facebook, twitter, stumbleupon, digg, dan google plus.

Jika sobat ingin menambahkan yang lain seperti linkedin dan sebagainya silakan modifikasi dan tambahkan kodenya. Langsung saja caranya seperti biasa, copy kode di bawah ini. Lalu tambah gadget atau widget di editor blog Sobat dan paste kodenya kemudian simpan.

<!-- floating share bar from reyzha.com Start -->
<style type="text/css">
#pageshare {position:fixed; top:30%; margin-left:-661px; 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 this page">
<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>
<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='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<!-- Do not remove this link -->
<div style="clear: both;font-size: 9px;text-align:center;">Get <a href="http://www.reyzha.com/membuat-tombol-share-statis-di-samping-halaman.html">widget</a></div>
</div>
<!-- floating share bar End -->

Bagaimana Sobat, jika posisi tombolnya kurang pas, silakan Sobat atur sendiri sampai tepat di posisi yang Anda inginkan. Selamat mencoba, semoga bermanfaat, dan Salam... :)

 

0 komentar:

Posting Komentar

Tahukah anda, berkomentar menggunakan nama dan url bisa meningkatkan kunjungan balik ke Blog anda? Gunakan form komentar dengan bijak. Tingkatkan Backlink secara efektif hanya dengan meninggalkan komentar menggunakan Name/URL.