Membuat Tombol Berbagi Jejaring Sosial Melayang

Setelah kemarin Putra IT 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

1. Login ke blog Rancangan Edit HTML
2. Expend Template dan kemudian cari kode ]]></b:skin>
3. Simpan (copy-paste) kode berikut ini tepat di atas kode  ]]></b:skin>

#sharehal {position:fixed; bottom:20%; margin-left:185px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#sharehal .tblshare {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;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
.sharesoc {display:inline-block;float:right;height:125px;margin:5px 0;width:60px;}

4. Selanjutnya coba anda cari kode </body>
Jika sudah ketemu, simpan (copy-paste) kode di berikut tepat di atas </body>

<div id='sharehal'>
<div class='tblshare' id='fb'>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<div class='tblshare' id='rt'>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>
<div class='tblshare' id='su'>
<script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/>
</div>
<div class='tblshare' id='digg'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'/>
<a class='DiggThitblshare DiggMedium'/>
</div>
<div class='tblshare' 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'/>
</a>
</div>
</div>
 
5. 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:#fff = ubah nilai fff untuh mengatur warna latar belakang dan sesuaikan dengan warna latar belakang artikel blog anda

Selamat mencoba dan semoga berhasil.:)