Cara membuat Widget Share Button Like dan Share Twitter Melayang Di sisi Blog

Buat Yang suka Blog Simple Widget ini Lumayan simple lho..Ukurannya Kecil tapi Lumyan penting,karena dengan tombol share mempunyai kemampuan luar biasa dalam Kategori Promosi,,pasti pengen kan Kalo Blog kita di promisi in sama pengunjung,,nilai Plus tu buat blog kita, jadi gak usah lama-lama langsung aja Praktekin,,
Ikuti Instruksi dibawah ini

1. Langkah pertama masuk ke akun blogger > Dasbor  > klik design/rancangan > Tata Letak 
2. Klik Tambah Gadget, di bagian sidebar.
3. lalu pilih HTML/Javascript, kemudian masukkan kode di bawah ini:
   
   
   <!--Widget Share Button Melayang Start-->
   <style>
   #pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px
   0;z-index:10;}
   #pageshare .sbutton {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;}
   </style>
   <div id='pageshare' title="bagikan ke teman anda">
   <div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
   <div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
   <div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
   <div class='sbutton' id='fb'><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><br/><div style="clear: both;font-size: 4px;text-align:center;"><a href="http://gubukmedia.com/" target="blank"><font color="blue">[Get Widget]<font></font></font></a></div></div>
   
   <!--Widget Share Button Melayang End-->
   
   
   
   
4. Klik Save/Simpan. Lihat blog sobat.

Untuk pengaturan lihat kode warna merah dan ubah sesuai yang sobat inginkan :

• angka 15% mengatur letak tinggi posisi share button dr sisi bawah blog, silakan dikurangi jika posisinya ingin diturunkan dan ditambahi jika ingin dinaikkan.
• angka 10px adalah posisi dari tepi paling kanan blog.
• sedangkan border: 1px solid black, adalah ukuran ketebalan batas kotak share button dan warna batas/garis share button itu sendiri.

Share this post