Cara Membuat Tombol Share Melayang

Munaz Blog - Kali ini saya akan shared tentnag cara membuat tombol share melayang.  Cara Membuat Tombol Share Melayang - Kali ini saya ingin share Widget untuk blog sobat Munaz Blog, yaitu Widget Tombol share melayang terbaru. Widget share melayang (Floating share) ini terdiri dari Tombol Google+ (Plus), Like Button Facebook, dan Twitter share button. Widget ini sudah dimodifikasi. Biasanya floating share ada border pada sisi-sisinya. Tapi sudah dihilangkan. Widget ini terletak di pojok kiri bawah dan tepat di atas tombol start windows :D
Tombol share dalam blog sangatlah penting untuk meningkatkan pengunjung ke blog kamu. Namun untuk menarik perhatian agar pengunjng blog mau berbagi artikel yan dibaca ke berbagai jejaring sosial, tentunya kamu membutuhkan tombol share yang cukup keren.

 Berikut ini adalah Tutorial Cara Pemasangan :
1. Login ke akun blogger.
2. Klik tab "Tata Letak".
3. Klik "Tambah Gadget".
4. Cari dan pilih "Html/JavaScript".
5. Langsung Copy dan Paste-kan kode berikut pada kotak "Konten"!. Untuk "Judul" Kosongkan saja!

 <!--Floating Share Buttons Code Start-->
<style>
#pageshare {position:fixed; bottom:1%; left:0px; float:left; padding:0 0 0px
0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:1px 1px 0 1px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {border:3px dotted Red; -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="Share This With Your Friends">
<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='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 style="clear: both;font-size: 10px;text-align:center;"><a href="http://www.baetus.com/2013/03/cara-menambah-tombol-share.html" target="blank"><font color="Black">[widget]<font></font></font></a></div></div>

6. Klik "Simpan", geser elemen ke bagian paling bawah! dan lihat hasilnya.

Cukup mudah bukan?. Cukup dulu postingan kali ini, semoga artikel ini bermanfaat. Terima kasih.:)
Visit Back !!!

Share this post