Feb 24, 2012

Cara Membuat Tombo Like, Share dan Twitter di Sisi Blog


Cara Membuat Share and Like Facebook dan Twitter Melayang di Sisi Kanan Blog - Untuk meningkatkan lalu lintas kunjungan ke blog kita, selain upaya optimasi SEO , perlu juga kiranya kita mengintegrasikan blog kita dengan media jejaring sosial populer seperti facebook dan twitter.

membuat share like facebook tweet google plus melayang di blogger
Jika kita meremehkan "kekuatan" share button / tombol berbagi ini, sama saja kita menyiakan-nyiakan peluang untuk menambah kunjungan ke blog kita.

Jika pada posting sebelumnya kita membuat share button di bawah posting, pada tutorial kali ini, Julak mau berbagi sama temen-temen bagaimana membuat salah satu widget share button melayang di sisi kanan blog. Widget kali ini dilengkapi tombol suka dan share Facebook, Tweet, Digg, stumble Upon dan Google +1 termasuk perhitungannya alias berapa banyak pengunjung yang membagikannya. Cara pembuatannya sangat mudah, karena tidak perlu mengedit CSS atau menambahkan kode HTML di template.


1. Langkah pertama masuk ke akun blogger > Dasbor, > klik design/rancangan > Tata Letak

2. Klik Tambah Gadget, di bagian sidebar.

3. Pilih HTML/Javascript, kemudian masukkan kode di bawah ini:

<!--Widget Share like FB tweet google plus digg 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='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://www.super-gaptek.com/2012/02/cara-membuat-blog-di-blogspot.html" target="blank"><font color="blue">Cara Membuat<font></font></font></a></div></div>

<!--Widget Share like FB tweet google plus digg  Button Melayang End-->


5. Simpan widget dan preview Blog Anda

Jika Anda sudah memiliki tombol google + di atas atau di bawah posting Anda, kemungkinan widget tersebut tidak muncul. Silakan hapus kode berwarna merah jika sobat mau menghapusnya, karena mungkin bisa mempercepat loading blog.

Jika Anda menggunakan template gelap / dark template, Silakan Anda dapat mencoba 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:#000000;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://www.super-gaptek.com/2012/02/cara-membuat-blog-di-blogspot.html" target="blank"><font color="white">Cara Membuat<font></font></font></a></div></div>

<!--Widget Share Button Melayang End-->

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


Bagaimana...? Selamat Mencoba, jangan lupa di like yaa... hehehe



29 comments:

  1. bagus artikelnya, tombol share buttonnya jadi menghemat halaman blog.

    ReplyDelete
  2. Mantaps mas brooooo
    di cobaaaaa

    ReplyDelete
  3. nuhun pisan (makasih banget)kanggo admin,nuhun kangge tutorialna,ieu blog abdi:
    http://amwofficial.blogspot.com/

    ReplyDelete
  4. @Rhibaz, silakan edit sendri kode2 berwarna merah, right 10px itu.

    ReplyDelete
  5. Info yang baguz sekali untuk disimak.....
    Bermanfaat sekali untuk saya....

    Mohon kunjungan baliknya yaa....
    Dan saya juga sangat berterima kasih sekali kalau anda berkenan FOLLOW dan Backlink Blog sederhana saya.... :-)

    ( http://zamrudhijau.blogspot.com/ )

    ReplyDelete
  6. sbnarnya maksud aku beda mas, tp ga masalah udah aku edit sendiri kok..

    ReplyDelete
  7. sebenernya ane dah pake sih yang kayak beginian, tapi kok ini lebih menarik dan hemat tempat yah... jadi pengen ganti model kayak gini...

    ReplyDelete
  8. wah bagus ini, saya juga sedikit membuat setting agar ikon button tidak sekedar berupa symbol dan tulisan, saya membuat agar dapat menampilkan gambar....

    untuk snippet yang agan berikan buat teman2 yang lain sebelum di pasang di edit dulu ya share buttonnya.

    ReplyDelete
  9. mantab nih, mohon ijin nerapin blog ane bos

    ReplyDelete
  10. @ayam potong @ lowongan kerja Silakan Brother

    ReplyDelete
  11. postinganya bermanfaat banget nih,ijin kopas ya om

    ReplyDelete
  12. ini dia yg saya cari. langsung tancap

    ReplyDelete
  13. alhamdulillah, makasih gan, ini yang aku cari dari kemarin,

    jempol pol buat agan nya,

    mampir-mampir gan ke blog saya :)

    ReplyDelete
  14. infonya menarik thks ya sob, udah posting ini

    ReplyDelete
  15. thks dah posting ini. berguna banget :)

    ReplyDelete
  16. nice info gan
    ijin cobain dulu ya

    ReplyDelete
  17. okeh terima kasih atas tutornya dan berhasil
    silahkan melihat disini http://adybakom.bogspot.com

    ReplyDelete
  18. mantap nigh mw coba ah
    buka ini ya

    http://radedoau.blogspot.com/

    ReplyDelete
  19. Makasih infonya kakak :) langsung di coba

    http://iifmoon.blogspot.com

    ReplyDelete
  20. woow,,,
    kren bngat gan,,
    makasih ya gan,,

    http://tkjsbb.blogspot.com

    ReplyDelete
  21. nice banget deh tutorialnya, TQ salam mampir ya aku punya banyak ebook gratis tuh :)

    ReplyDelete

Anda harus menjadi follower blog ini jika ingin memberikan komentar. Terima Kasih