Cara Membuat Tombol Floating Share Facebook, Twitter, Buzz, dan Digg di Blogger

dalam perbaikan

Thank you for using rssforward.com! This service has been made possible by all our customers. In order to provide a sustainable, best of the breed RSS to Email experience, we've chosen to keep this as a paid subscription service. If you are satisfied with your free trial, please sign-up today. Subscriptions without a plan would soon be removed. Thank you!

Cara Membuat Tombol Floating Share Facebook, Twitter, Buzz, dan Digg di Blogger - kami akan mengulas cara membuat sebuah tombol berbagi tetapi bukan di postingan, tetapi di pinggir blog dan melayang

Contohnya seperti blog ini, dan pada gambar diatas. Cara Membuatnya sbb :

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{
left:6%;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 :

bottom:20% = ubah nilai 20% untuk mengatur jarak antara bagian bawah browser dengan tombol

margin-left:6% = ubah nilai 6 untuk mengatur jarak antara bagian pinggir browser dengan tombol

float:left = ubah left ke right jika kita ingin menempatkan tombol di sebelah kanan halaman artikel

background-color:: transparant= artinya waranya transparan anda bisa menambahkan warna lainnya

selamat mencoba semoga sukses...



sumber

Admin 27 Jun, 2011

--
Source: http://pangkalan-unik.blogspot.com/2011/06/cara-membuat-tombol-floating-share.html
~
Manage subscription | Powered by rssforward.com

Artikel Terkait:

Description: Cara Membuat Tombol Floating Share Facebook, Twitter, Buzz, dan Digg di Blogger Rating: 4.5 Reviewer: Unknown ItemReviewed: Cara Membuat Tombol Floating Share Facebook, Twitter, Buzz, dan Digg di Blogger