Cara Membuat Kotak Like Halaman Facebook Muncul dan Melayang di Blog

Baiklah karena banyak sahabat yang request gimana sih Cara Membuat Kotak Like Halaman Facebook Muncul dan Melayang di Blog ?  Kali ini SangDesains akan sharing cara memasangnya di blog. Sangat pas sekali bagi sobat yang ingin halaman facebooknya banyak yang ng-like.memasangnya secara floating dan akan turun jika croll mouse ke bawah dan enaknya ada tombol closenya.  Kalo belum tau apa itu Likebox yang muncul dan melayang bisa lihat screenshotnya dibawah ini :

                                                           

Syaratnya kita sudah punya halaman Fanpage Facebook, lalu Ambil url alamat Fanpage Facebook sobat masing masing .Jika semua senjata sudah siap, ayo sekarang kita menuju TKP praktekin bareng2 :
1. Pertama Login Seperti biasa ke akun blog sobat masing2
2. Pada halaman Dashboard blog pilih >> Tata Letak >> Lalu Klik Add a Gadget atau Tambah Gadget !!!
3. Scroll ke bawah sedikit >> Lalu pilih Widget HTML/Javascript 
4. Jika sudah Copy Kode di Bawah ini dan Paste di dalam Widget kolom HTML/Javascript !!!

<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'>
$(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>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<div class="fb-like-box" data-href="http://www.facebook.com/pages/Sangdesains/281607918628049" data-width="292" data-show-faces="true" data-stream="false" data-header="false"></div>
</center>
<!-- HTML End -->
<a class='close' href='#'>&times;</a>
</div>

NB : Tulisan merah ganti dengan url alamat Fanpage Facebook sobat . .

Sekian yang bisa sangdesains bagi,mudah mudahan bermanfaat buat sobat ,jika sobat ada yang tidak mengerti silahkan sobat tinggalkan komentar di bawah :) .
Terima Kasih ...