Cara Membuat Like Box Facebook Melayang Di Blog

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.

Dan yang akan saya bagikan kali ini adalah like box yang melayang di tengah-tengah blog, like box yang ini juga disertai dengan tombol "Close" jadi tidak memaksa pengunjung untuk meng-like Fanspage kita (visitor-friendly)

Sebelum memasang widget anda sudah pasti harus memiliki Fanspage di facebook, ya kalau belum punya bisa dibuat dulu Cara Membuat FansPage

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:300px;
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/pages/Bocah-Mbelink-Belajar-NgeBlog/318411298326095?ref=hl?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 -->
<a class='close' href='#'>&times;</a>
<p style=" float:right; margin-right:35px; font-size:10px;" >Powered By <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://masterbama.blogspot.com/">Facebook</a> and <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://masterbama.blogspot.com/2014/07/cara-membuat-like-box-facebook-melayang-di-blog.html">Get This Widget</a></p>
</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! ^_^