sebuah tombol berbagi tetapi bukan di postingan, tetapi di pinggir blog dan melayang.
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 :
- bottom:20% = ubah nilai 20% untuk mengatur jarak antara bagian bawah browser dengan tombol
- margin-left:185px = ubah nilai 185 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 dan semoga berhasil.
