Jumat, 16 Desember 2011

Cara Membuat Tombol Share Floating facebook, twitter, dan google plus pada blog

Cara membuat (menambahkan) tombol share Floating / melayang facebook, twitter, dan google plus pada blog - Tombol share merupakan media yang sangat efektif dalam menyebar luaskan hasil tulisan ataupun karya kita dalam bentuk blog ke dalam berbagai jejaring sosial. Belum lengkap rasanya jika tombol share ini belum terpasang pada blog kita, apapun bentuk tombol sharenya. Nah untuk itu Remix-7 akan memberikan tips blog yang sederhana ini buat teman-teman sekalian, mudah-mudahan masih bermanfaat. 


Berikut langkah-langkah dalam pembuatannya:
1. Masuk ke akun Blogger Anda
2. Klik Rancangan
3. Klik Tambah Gadget
4. Pilih dan klik HTML/JavaScript
5  Copy Kode di bawah ini
<style>
#pageshare {position:fixed; bottom:100px; margin-left:-1100px; float:left; background-color:#000000;padding:0 0 2px 0;z-index:10;border-top-left-radius:10px;-moz-border-radius-bottomleft:10px;-webkit-border-bottom-left-radius:10px;}
#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">
<div class="sbutton" id="fb">
<a href="http://www.facebook.com/sharer.php" name="fb_share" type="box_count">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="gplusone">
<g:plusone size="tall"></g:plusone></div></div>
6. Paste / letakkan kan pada gadget yang telah anda tambahkan tadi tanpa judul
7. Klik Simpan
8. Lihat Hasilnya !!


Catatan:
  • Anda bisa menyesuaikan ukuran dari sidebar, dari bawah dan juga background tombol share float ini sesuai blog Anda
  • Untuk mengubah jarak dari sidebar, lihat " margin-left:-1100px" ganti 1100px dengan yang anda inginkan, semakin besar semakin dekat ke sidebar kiri.
  • Untuk mengubah background lihat, "color:#000000" ganti 000000 (hitam) dengan yang anda inginkan, untuk warna putih kodenya "ffffff " untuk kode warna yang lain bisa anda cari sendiri
  • Untuk menentukan jarak dari bawah blog Anda, lihat "bottom:100px" ganti 100px dengan yang anda inginkan, semakin besar angkannya semakin jauh dari bawah blog.

Artikel Terkait

Cara Membuat Tombol Share Floating facebook, twitter, dan google plus pada blog
4/ 5
Oleh

Berlangganan

Suka dengan artikel di atas? Silakan berlangganan gratis via email

9 komentar

16 Desember 2011 pukul 02.03 delete

gan klo menampilkan page fans facebook kayak punya agan itu gmn? mohon di share ya sebelumnya terima kasih

Reply
avatar
16 Desember 2011 pukul 13.29 delete

dulu gw juga pasang kyk gini gan,, skrg udah dicopot,, =))

Reply
avatar
16 Desember 2011 pukul 17.15 delete

@Michaell Andre Steven: Oke,. ntar di lain kesempatan akan saya share sob :D.

@Rama88: Ia gan, yang penting tombol share apapun bentuknya mau float jyaj gni atau yang standar pada postingan, seperti kata saya pada postingan =))

Reply
avatar
16 Desember 2011 pukul 17.42 delete

wahhh keren nih pengunjung jadi bisa ngeshare blog dengan mudahnya :) tinggal tengok ke kiri langsung jleb! :))

Reply
avatar
16 Desember 2011 pukul 19.01 delete

asik jadi blog kita makin populer jika ada tombol sisal networknya seperti FB, Twitter dll...
keren sobat...

Reply
avatar
16 Desember 2011 pukul 21.16 delete

@Farixsan Quilicuor: Hehehe,. Kira2 begitu sob, thanks :)

@Asis Sugianto: Iya sob, walaupun nggak populer setidaknya pengunjung lebih mudah untuk meng share ke jejaring sosial jika mereka tertarik :).

Reply
avatar
21 Desember 2011 pukul 02.11 delete

gan....wa da coba ni kok ga ada google+ na...?????

Reply
avatar
28 Desember 2011 pukul 22.00 delete

kok gak bisa dimodifikasi gan??????
ane mau ubah warna n tata letaknya malah gak bisa,,
tetep aja gitu,,, http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif

Reply
avatar

Tinggalkan Jejak, Meriahkan Berkomentar secara sopan :-)
Memasukkan link ke dalam komentar adalah SPAM, maka akan dihapus