Cara Membuat Like box Facebook , Follow Twitter , Dan Google+ Melayang

Tentunya sudah tidak asing lagi dengan widget like box kan, yap! widget yang menampilkan Fanspage facebook di blog. Biasanya Widget ini digunakan oleh pemilik blog untuk menambah Like pada Fanspagenya agar lebih banyak yang ngelike .

Dan saya bagikan ini adalah like box yang ada tombol Closenya , jadi agar tidak memaksa visitor untuk Ngelike Fanspage kita (Visitor-Friendly)

Cara Memasang Like Box Melayang :

1. Login ke blogger.com

2. Pilih menu "Tata Letak"

3. Klik "Tambahkan Gadget" Terserah yang mana aja boleh, soalnya widget ini float (melayang).

4. Pilih "HTML/Javascript".

5. Masukkan kode dibawah ini.

<style type='text/css'>
/* Message Box */
#box-message {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:330px;
height:auto;
padding:16px;
background:#fff;
font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#box-message a.close {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
#twitterx {
background: #EEF9FD;
padding: 10px;
text-align:center;
border: 1px solid #C7DBE2;
border-top: 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top Value When Page Loaded Completed
$('#box-message').animate({top:"50px"}, 1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/kocakcicak14?ref=hl&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</center>
<!-- HTML End -->
<!-- Tempatkan tag ini di head atau tepat sebelum tag body penutup. -->
<script src="https://apis.google.com/js/platform.js" async defer>
  {lang: 'id'}
</script>

<!-- Tempatkan tag ini di mana pun Anda ingin widget ditampilkan. -->
<div class="g-person" data-href="//plus.google.com/u/0/108595942548436374356" data-theme="dark" data-layout="landscape" data-rel="author"></div>
<a class="twitter-follow-button"
  href="https://twitter.com/Maulana_ican">
Follow @Maulana_ican</a>
<a class='close' href='#'>&times;</a>
</div>

6. Ganti yang berwarna Merah dengan URL Fanspage Facebook kalian.
7. Klik "Simpan"

Selamat widget Like Box anda sudah terpasang, jangan lupa untuk mengklik "Like" pada Fanspage saya ya sob! ^_^

#NB :
Kuning = Like Box Facebook
Hijau = Google+ follow
Biru = Follow Twitter

Jika anda hanya ingin memakai Sebagian , Hapus yg tidak anda inginkan !