Floating Share, Tombol Berbagi Jejaring Sosial (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;
}





twitter.com/share" class="twitter-share-button"  data-count="vertical">Tweet<script  type="text/javascript"  src="http://platform.twitter.com/widgets.js">







<div  style="clear:both;">

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.:)

Lihat Juga :

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

0 komentar:

Posting Komentar

Silahkan berkomentar di bawah sini . Bentuk Promosi akan di SPAM Terima Kasih