Cara Mudah Membuat Social Share Melayang

Tombol Social Share ini terdiri dari Google Plus, Like Facebook, Twitter secara melayang. Jika sobat memasang tombol social google plus dan social share yang lainnya secara melayang, bisa menghemat ruang halaman blog sobat dan bisa memudahkan para visitor kita menshare atau memberi google plus+ pada artikel blog kita.
pada tutorial kali ini, Putupunyablog 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, dan Google+1 termasuk perhitungannya alias berapa banyak pengunjung yang membagikannya. Cara pembuatannya sangat mudah, karena tidak perlu mengedit CSS atau menambahkan kode HTML. Berikut ini adalah langkah-langkah cara pemasangan tombol share button melayang:

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 Button Melayang Start-->
<style>
#pageshare {position:fixed; bottom:10%; right:8px; float:left; border: 1px solid white; 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="Update status di facebook">
<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 class='sbutton' id='fb'><a name="Bagikan Ke Teman Anda" 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: 9px;text-align:center;"><a href="http://putupunyablog.blogspot.com/2012/05/cara-mudah-membuat-social-share.html" target="Pasang Widget"><font color="red">PASANG<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 white, adalah ukuran ketebalan batas kotak share button dan warna batas/garis share button itu sendiri. Semoga bermanfaat.

Baca Juga Artikel Dibawah Ini!



17 komentar:

  1. @sprei murah ok gan trima kasih gan atas kunjungan dan komentarnya :).

    BalasHapus
  2. @Ingin Info Ya gan, Terima kasih atas kunjungan dan komentarnya gan :).

    BalasHapus
  3. Lam knal sob...
    Coba like & share melayang versi gw, tutorial lengkap klik nama gw di atas ya: All About...

    BalasHapus
  4. @All About Tutorial Ok sob lam knal balik. Ok sob siap meluncur ke tkp..

    BalasHapus
  5. sob ,, kasih tahu saya cara bikinnnya transparan seperti blog sobat ini bagaimna caranya ,,,thankkk

    BalasHapus
  6. @handaka bagian border: 1px solid white DIHAPUS aja gan.. dan backround-color:#000000; DIHAPUS.

    BalasHapus
  7. Thanks sudah berbagi ilmunya, sukses selalu...

    BalasHapus
  8. Thanks gan :)
    sukses selalu
    jangan lupa Kunjungan balik
    www.indonesia-community.net

    BalasHapus
  9. Bagus banget sob,
    tapi itu ada link aktif halaman sobat yang belum ada tulisan warna merah
    baris bawah..

    tapi sangat bermanfaat, saya sudah berhasil

    BalasHapus
  10. sudah bagus portalnya, kalau punyaan saya belum sempurna, maklum baru mengenal masih belajar, itu kalau punyaan saya kok gak bisa di buka mas putu pakai blogspot yang free,dan saya link fb masih belum bisa membuka
    , kalau wordpress masih mudah, mohon info kalau gak keberatan.
    .

    BalasHapus
  11. makasih om tipsnya :)
    mampir yang suka maen gitar ke chordgembel.blogspot.com yah :)

    BalasHapus

Silahkan Berkomentar. Dilarang Live Link. Tidak Memakai Verifikasi Kata. Berkomentarlah Dengan Sopan!.

Entri Populer

 
Copyright © 2012 - 2013 Putupunyablog | Powered by Blogger