Sabtu, 17 Desember 2011

cara membuat halaman share melayang


  1. Silahkan masuk ke Account Blogger dengan ID kawan 
  2. Pada Design / Perancang Template pilih tambah gadget
  3. Tambah HTML / JavaScript
  4. Copas kode script berikut kedalamnya
<!-- Halaman Share Melayang Start tips-blogbego -->
<style>
#pageshare {position:fixed; bottom:35%; margin-left:-111px; 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="Get this from tips blogbego.blogspot.com">

<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='gb'>
<a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='post on google buzz'>

<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'></script>
</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>

<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='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>

<div style="clear: both;font-size: 9px;text-align:center;">Get <a href="http://tips-blogbego.blogspot.com/">widget</a></div>
</div>
<!-- Halaman Share Melayang End -->

Text yang berwarna merah adalah untuk posisi tampilan :
Sebagai gambaran kawan tentang posisi disini sedikit saya jelaskan
bottom : 30% artinya posisi tampilannya hampir mendekati keatas, kesimpulannya semakin kecil nilai prosentase tersebut posisinya makin kebawah, begitu juga sebaliknya
Sedangkan untuk margin-left : -111px; maka posisi tampilannya akan mepet kekiri, dan semakin kecil nilainya maka posisinya semakin kekanan tapi tetap masih di posisi kiri.
Kalau kawan menginginkan posisi tampilannya di kanan apa bisa ?!  tentu bisa kawan dengan merubah nilainya, caranya dan contoh : margin-left: -111px; kawan rubah menjadi margin-left : 800px; tanpa - [min]

Semuanya ini tidak terlepas dengan lebar [width] template kawan untuk posisi yang tepat, silahkan kawan mencobanya untuk mendapatkan posisi yang pas dan kawan saya silahkan mengurangi atau menambahkan share-share yang lain sesuai kebutuhan kawan sambil

0 komentar:

Posting Komentar

 
Design by Free tempelate | Blogger by Mbek maen-maen - Premium Blogger Themes | Best Web Host