0 Cara Membuat Tombol Floating Share Facebook, Twitter, GOOGLE +, LIKE, SEND di Blogger

Cara Membuat Tombol Floating Share Facebook, Twitter,  GOOGLE +, LIKE, SEND di Blogger - kami akan mengulas cara membuat sebuah tombol berbagi tetapi bukan di postingan, tetapi di pinggir blog dan melayang

Contohnya seperti blog ini, dan pada gambar di samping kiri. Cara Membuatnya sbb :

1. Login ke blog
2. Pilih Rancangan
3. Tambah Widget
4. Pilih HTML/Javascript
5. Copy dan pastekan kode berikut :

<!--SideBar Floating Share Buttons Code Start--> <style> #pageshare {position:fixed; bottom:20%; right:30px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#ff0000;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="Share This With Your Friends"> <div class='sbutton' id="fb-root"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:send layout="box_count" show_faces="false" font=""></fb:send></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 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: 12px;text-align:center;"></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:6% = ubah nilai 6 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 semoga sukses...

Artikel Terkait