Floating Share, Tombol Berbagi Jejaring Sosial (Melayang)

Cara Membuat Tombol Berbagi Jejaring Sosial Melayang - Setelah kemarin blog tutorial membahas tentang cara membuat tombol share facebook dan twitter di postingan Blog, hari ini kang salman akan mengulas kembali sebuah tombol berbagi tetapi bukan di postingan, tetapi di pinggir blog dan melayang

Mau lihat contohnya => http://awesomescreenshot.com/01388tq9e

Info: Tulisan ini telah di perbarui tanggal 18 Mei 2011 dengan kode yang baru.

1. Login ke blog
2. Pilih Rancangan
3. Tambah Widget
4. Pilih HTML/Javascript
5. Copy dan pastekan kode berikut :

<style  type="text/css">
*{margin:0;padding:0;}

* html #z33sHare{
position:  absolute;
}

#z33sHare{
right:1%;width:  70px;background:transparant;border:0px solid  #E7E7E7;-moz-border-radius:3px;-webkit-border-radius:3px;
position:fixed;
bottom:  20%;
}

#z33sHare div{
padding:6px 6px 6px 5px;
}

#stw{
margin-left:-2px;
}

#sfs{
margin-left:-5px;
}

</style>
<div  id="z33sHare">
<div id="ssl-box">
<div id="stw">
<a  href="http://twitter.com/share" class="twitter-share-button"  data-count="vertical">Tweet</a><script  type="text/javascript"  src="http://platform.twitter.com/widgets.js"></script>
</div>
<div><a  title="Post to Google Buzz" class="google-buzz-button"  href="http://www.google.com/buzz/post"  data-button-style="normal-count"></a><script  type="text/javascript"  src="http://www.google.com/buzz/api/button.js"></script>
</div>
<div>
<script  type="text/javascript">
(function() {
var s =  document.createElement('SCRIPT'), s1 =  document.getElementsByTagName('SCRIPT')[0];
s.type =  'text/javascript';
s.async = true;
s.src =  'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s,  s1);
})();
</script>
<a class="DiggThisButton  DiggMedium"></a>
</div>
</div>
<div><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  style="clear:both;"></div></div>

6. Terakhir simpan template anda dan lihat hasilnya! :)


Keterangan :
Untuk mengatur posisi tombol pada cara kedua (Tombol Berbagi Terapung pada Pinggir Artikel) perhatikan kode pada Langkah 4 baris 1 :

1. bottom:20% = ubah nilai 20% untuk mengatur jarak antara bagian bawah browser dengan tombol
2. margin-left:185px = ubah nilai 185 untuk mengatur jarak antara bagian pinggir browser dengan tombol
3. float:left = ubah left ke right jika kita ingin menempatkan tombol di sebelah kanan halaman artikel
4. background-color:: transparant= artinya waranya transparan anda bisa menambahkan warna lainnya

Selamat mencoba dan semoga berhasil.:)

Cara Membuat Tombol Berbagi Jejaring Sosial Melayang

Lihat Juga :

• Trik Memasang Tombol Share, Tombol Facebook, dan Twitter dll
• Cara Membuat Tombol Share Facebook dan Twitter Di Postingan Blog

Jangan asal copy paste, baca aturanya di sini !
Post By Kang Salman
http://www.kucoba.com

Ingin mendapat penghasilan tambahan di internet? Cara kerja mudah hanya dengan melakukan survey dan mengisi angket lalu anda akan di bayar. Itulah pekerjaan anda disini <= klik untuk daftar dan memanen uang $ seperti saya. Gratis

Dapatkan update artikel  terbaru kami langsung ke email anda.