Cara Membuat Fanspage Facebook Melayang Di Blog

Daftar Isi [Show]

Jika kalian ingin memasang fanspage facebook melayang pada blog dan ingin responsive berarti kalian sudah tepat membaca postingan ini. Saya baru saja memasang fanspage melayang ini pada blog saya ini. Makanya sebelum melanjutkan membaca tulisan ini, mohon like terlebih dahulu fanspage saya :)

Sebenarnya cara ini sudah banyak blogger yang membahas. Tp jika kalian gagal atau tidak bisa diterapkan berarti scriptnya sudah basi. Silakan coba caraku ini

Cara Membuat Fanspage Melayang Blog

1. Login ke blog kalian
2. Pilih Layout/tata letak
3. Tambahkan Gadget
4. Pilih HTML/Javascript
5. Copikan code dibawah ini

<style type='text/css'>
/* Message Box Facebook Melayang By Susiloblog */
#box-message {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:340px;
height:auto;
padding:16px;
background:#fff;
font:normal Dosis, Georgia, Serif;
color:#111;
border:3px 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;
}
</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><a class="murub">KATA1<br/> <br/>KATA2<br/>KATA3</a></center>
<center><iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/susiloblog&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:215px;" allowtransparency="true"></iframe>
</center>
<!-- HTML FB End -->
<a class='close' href='#'>&times;</a>
</div>

Note

- Ubah Kata1, Kata2, Kata3 sesuai yang kalian mau
- susiloblog ubah dengan alamat fanspage kalian

Selesai