Membuat Tombol Berbagi Social Network Melayang

Advertisement

Sebelumnya kita pernah membuat Cara membuat Tombol Share atau Share Button Blogger di bawah postingan kali ini kita akan belajar Membuat Tombol Berbagi Social Network Melayang di samping blog . Menurut saya tombol sher Social Network ini adalah salah satu widget penting untuk blog kita, karena jika kita memasang tombol sher maka kita atau pengunjung dapat dengan mudah membagikan artikel di blog kita ke media Social, dengan begitu ini adalah salah satu cara untuk memperbanyak pengunjung blog kita. 
Di Tombol Berbagi Social Network Melayang telah disediakan, Tombol Google Plus, Tombol Sher Facebook, Tombol Twitter dan tombol Social media lainnya. dan untuk contoh silahkan sobat lihat gambar di atas atau lihat LIVE DEMO disini..
Untuk menambahkan widget yang satu ini sangat gampang kok, karena tanpa edit template terlebih dahulu. Oke untuk sobat yang pengen silahkan simak Cara Membuat Tombol Berbagi Social Network Melayang.

  • Seperti Biasa masuk dulu ke akun Blogger masing masing.
  • Nasuk ke menu Rancangan >> Tambah Gadget 
  • Pilih HTML/Java Script (gak dikasih judul juga gak apa-apa)
  • Kemudian Paste kode berikut :
<!-- floating page sharers Start--> <style type="text/css"> #pageshare {position:fixed; bottom:25%; margin-left:-790px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#ffffff;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;/*bs-fsmsb*/-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 to Your Friends"> <div style="clear: both;font-size: 16px;text-align:center;"> </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> <div class='sbutton' id='rt'> <script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script> </div> <div class='sbutton' id='rw'> <div class="addthis_toolbox addthis_default_style "> <a class="addthis_counter"></a> </div> <script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4d764bd843e747be"></script> <a href=" http://www.caragampang.com/2012/03/membuat-tombol-berbagi-social-network.html "/>Get this</a> <!-- floating page sharers End --></div></div>
NB : Untuk mengatur letak, silahkan ganti angka 790 berwarna merah untuk mengatur letaknya, semakin besar angkanya makin menjorok ke kiri, dan semakin kecil angkanya semakin menjorok ke kanan..
Gimana sobat mudahkan membuatnya. Sekarang anda dapat memperaktekan Cara Membuat Tombol Berbagi Social Network Melayang
Advertisement

12 komentar

kok Gak bisa ya mas.... Apa ada yang kurang ya scriptnya...?

mantep gan.. makasih ya.. visit my blog juga ya

@Aan Aryanto sama-sama gan..
happy blogging :)

@bisnis online formula sudah saya coba gak adda yang salah kok.. lihat saja demonya..

udah saya follow nih....

@Aan Aryanto okey gan terimakasih.. sudah saya folbek ko.. happy blogging..

thank you so much.very nice post

thanks gan, meski ndak bisa dicopy sih :@
salam kenal yah, dollback juga yah

gan di demo nya widget nya ndak muncul ?? gimana ?

thank you nice post :))

nice post gan,, tp itu posisinya ngaruh ma resolusi monitor juga egak ya :D ? thx

Komentar anda sangatlah berarti bagi kami, silahkan berkomentar dengan bijak dan sopan. Komentar dengan mencantumkan Link aktif akan kami hapus.