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 dugem-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.

0 komentar:

Poskan Komentar