Sunday, November 3, 2013

Cara Membuat Tombol Share Melayang di Blog

Untuk meningkatkan traffic blog kita, selain upaya optimasi SEO kita juga perlu membuat tombol share di blog kita yang akan menghubungkan blog dengan media jejaaring sosial seperti facebook, twitter ataupun google+. Tutorial kali ini saya akan membahas cara membuat tombol share melayang di sisi kiri atau kanan blog anda.


tombol share di blog

Berikut langkah-langkah pemasangannya di blog :

1. Masuk ke akun > Pilih Tata Letak
2. Klik Tambah Gadget di bagian sidebar
3. Pilih HTML/Javascript kemudian copy paste kode di bawah ini

<!--Widget Share like FB tweet google plus digg Button Melayang Start-->
<style>
#pageshare {position:fixed; bottom:15%; left:10px; float:left; border: 1px solidblack; 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='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></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: 8px;text-align:center;"><a href=" http://inticoretan.blogspot.com/2013/11/cara-membuat-tombol-share-melayang-di-blog.html"  target="blank"><font color="blue">Get Widget Here<font></font></font></a></div></div>
<!--Widget Share like FB tweet google plus digg  Button Melayang End-->

4. Simpan  widget dan lihat blog anda

Note : Tulisan berwarna merah adalah posisi widget, saya memakai widget ini disebelah kiri jadi saya tulis left, kalau anda ingin mengubahnya di sebelah kanan tinggal ganti tulisan berwarna merah dengan right.

Selesai...mudah kan ??
oh iya jika anda sudah memiliki tombol google+ ( G+ ) baik di atas maupun dibawah postin, kemungkinan tombol google+ di widget yang kita buat tadi tidak akan muncul.

Demikianlah tutorial cara menampilkan tombol share melayang di blog. Semoga bermanfaat

45 comments:

  1. sip gan
    mmpir di hums sya gan http://www.emelde.com/

    ReplyDelete
  2. thanks gan,, saya lagi nyari tutorial ini. Widgetnya bagus N ringan . .
    kunjungannya balik yaa gan http://jual-gadget-terbaru.blogspot.com/

    ReplyDelete
  3. sipp
    silakan mampir www.venpedia.blogspot.com

    ReplyDelete
  4. kunbal nya ya gan.. hehe..
    http://m-tajuddin-ns.blogspot.com/

    ReplyDelete
  5. akhirnya jadi juga yang ane pengen. thanks banget wat infonya gan
    http://nasrulloh-ibnutora.blogspot.com

    ReplyDelete
  6. wah keren nih bisa melayang2 hehe , saya coba pasang htmlnya gan hehe

    ReplyDelete
  7. artikel yang (Y) iin sedot gan :D
    mampir ke blog ane boleh lho gan muzindo.blogspot.com

    ReplyDelete
  8. Weh, telat!
    kata-rifal.blogspot.com

    ReplyDelete
  9. thanks gan tutorialnya sangat membantu,,,
    http://www.grosiracemaxsdangamatgoldgpurwakarta.com/

    ReplyDelete
  10. Keren banget gan tutorial nya..
    kujungan balik yukk gan..
    http://tourisattraction.blogspot.co.id/

    ReplyDelete
  11. javascript void gan gmn ya cara ngatasinya

    ReplyDelete
  12. Keren.. dan jadinya juga melayang-layang.. heheee..

    ReplyDelete
  13. Bagus button share nya min . .

    tapi lagi nyari yang biasa di bawah artikel aja nih, hehe

    maju terus blog nya :)

    visit ya : http://pepinnono.blogspot.co.id/

    ReplyDelete
  14. mantep bro..
    kunjung baslik ye?
    warung-tutorial.web.id

    ReplyDelete
  15. Artikel yang menarik gan, thanks

    mampir ya: bukuacuan.blogspot.com

    ReplyDelete
  16. mantep makasih..

    mampir gan https://mangkokojo.blogspot.co.id/

    ReplyDelete
  17. sip gan,, makasih info nya,, bisa mampir ke sini https://revolusiinsan.blogspot.com

    ReplyDelete
  18. This comment has been removed by the author.

    ReplyDelete
  19. makasih atas informasinya ya gan :)
    kunjugi blog saya juga di www.aquillien.ml

    ReplyDelete
  20. mantab gaan kunjungi juga blok ane yaa http://www.crystalofknowledge.tk/

    ReplyDelete
  21. the news is very interesting to see. In wait beneath visit
    Kidney Care Capsule

    ReplyDelete
  22. Ko ga jalan ya , kayanya saya salah copas gan

    ReplyDelete
  23. wah sangat membantu gan
    dari kemaren ane cari2

    mmpir di gubuk ane ya http://www.berkahberbagi.info

    ReplyDelete
  24. wah sangat membantu gan
    dari kemaren ane cari2

    mmpir di gubuk ane ya http://www.berkahberbagi.info

    ReplyDelete
  25. berhasil gan thanks ya

    mampir juga di blog gue http://gravitycrl.blogspot.co.id/

    ReplyDelete
  26. Perlu di praktekin ini, mantab boss. Thanks infonya. jangan lupa mampir ya.
    Sewa Mobil Avanza Di Malang | sewa mobil di malang | sewa agya di malang

    ReplyDelete
  27. Gan, saya kan udah pasang widgetnya. Tapi sekarang mau saya hilangkan.
    Saya udah coba hapus kode kodenya masih tetap ada sampe sekarang. Gimana ya cara supaya dihilangkan saja ? Pliss pencerahannya...

    ReplyDelete
  28. mantap gan sesuai dengan yang sya cari jika agan, saya ada saran artikel untuk agan dan semua pengunjung agan silahkan dibaca http://ngeblogink.com/cara-membuat-contact-us-di-wordpress/

    ReplyDelete
  29. terimakasih untuk tipsnya gan. sangat bermanfaat

    salam blogger
    http://qncjellygamattradisional.com/obat-diabetes-alami/

    ReplyDelete
  30. Mampi juga gan di blog aku.
    Www.ahmaddedenhidayat.blogspot.com

    ReplyDelete
  31. Gan,cara ngilanginnya gimana ya ? Saya udah pake banyak cara tapi belom hilang jugak, atau apa saya yang salah ? Mohon pencerahannya ya ?

    ReplyDelete
  32. Mantaf sob, akan langsung sya praktekan ne, maklum pemula...

    ReplyDelete
    Replies
    1. Wahh keren bang terus semangat mampir juga ke blog saya www.z-ikhwan.com

      Delete
  33. Keren bang tak cban sitik.. mampir juga ke lapak ane ya

    ReplyDelete

Silahkan Berkomentar Dengan Kata-Kata yang Sopan

Powered By Blogger · Designed By Seo Blogger Templates