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.
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://basgor.blogspot.com/2012/11/cara-membuat-like-fbtwitter-dan-share.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://basgor.blogspot.com/2012/11/cara-membuat-like-fbtwitter-dan-share.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