SEBAIKNYA KUNJUNGI BLOG SAYA :

BLOGBEGO CREATION




Cara Membuat Halaman Share Melayang

Karena atas permintaan kawan kita yang tak perlu saya sebutkan namanya disini lewat ShoutMixnya Kang Rohman : bagaimana cara membuat Share Melayang, sebenarnya diminta untuk disampaikan lewat Email, tapi karena Kode Scriptnya cukup lumayan lebih baik saya posting saja :z  untuk Demonya kawan bisa lihat disini
Okey langsung saja ke cara pemasangannya :
  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 :O
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 ?! :r  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 berkreasi 



12 komentar pada “Cara Membuat Halaman Share Melayang”

  1. pertamak,:D baru di postinginnih saya aman kan yah :O

    BalasHapus
  2. Udah saya coba & berhasil, makasih tutorialnya.. Selamat Pagi, Happy Blogging........blogwalking me please.

    BalasHapus
  3. @Ruang Informasi trims kawan :r
    tapi URL nya error 404 :z

    BalasHapus
  4. sukses gan...thanks buat postingan nya gan

    BalasHapus
  5. Thanks Gan udah di share :~ Ane izin Copas ya kode nya :y nanti ane cantumin link ente :D

    BalasHapus
  6. Bagaimana cara membuat gambar yang disorot disamping itu?

    BalasHapus
  7. wah mantap tapi maaf script yang kawan tuls diatas saya manfaatkan untuk meletakkan iklan adsense agar seolah2 iklan ada diluar templete, hehehehe :d

    BalasHapus
  8. @irwan efendi tak masalah, itu kan Kreasi masing-masing, sebenarnya ada beberapa model yang bisa kawan coba pada artikel yang lain :r

    BalasHapus
  9. http://bebasbayarsolusiku.blogspot.co.id/#

    BalasHapus

BERIKAN KOMENTAR SESUAI TOPIK DAN SANTUN
BUKAN SPAM - PORNOGRAFI MAUPUN MASALAH ETHNIS / SARA

TAMBAHKAN KOMENTAR DENGAN EMOTICON :
DENGAN KODE ALFABET < :a s/d :z >

 

Copyright  ©  TIPS BLOGBEGO

site meter

Template by Blogger templates
Powered by Blogger