Cara membuat likebox fanspage facebook melayang di blog ini hampir sama dengan cara membuat like box fanspage pada posting saya sebelumnya. Jika pada fanspage sebelumnyadiletakkan pada sedebar atau bisa juga pada footer, maka bedanya fanspage yang akan kita buat kali ini dalam posisi melayang yang dilengkapi dengan tombol close.
Widget ini akan muncul ketika blog Anda selesai loading, selanjutnya pengunjung akan melihat pesan like atau suka dan bebas menentukan like atau tidak. Setelah itu bisa menekan tombol close untuk menutup widget tersebut.
Tampilan dari like box fanspage facebook yang disertai dengan tombol penutup bisa Anda lihat di bawah ini.
Jika Anda ingin membuatnya, langkah-langkahnya tidak begitu sulit. Anda tinggal memasukkan alamat url dari halaman fanspage facebook Anda pada kode di bawah ini.
Langkah-langkah membuat like box fanspage facebook pada blog:
Login ke blog Anda.
Pilih blog yang ingin Anda pasang like box fanspage.
Pilih tata letak atau layout.
Pilih tambah gadget.
Pilih HTML/Javascript.
Masukan kode di bawah ini.
<style type="text/css">
/* Like Box */
#like-box {
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;
}
#like-box 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
$("#like-box").animate({top:"50px"}, 1000);
// Remove Mailbox When Close Button On click
$("a.close").click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id="like-box">
<!-- HTML Start -->
<center><a class="murub">SILAHKAN LIKE !</a></center><br/>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/Afdhalilahi?ref=hl&width&height=290&colorscheme=light&show_faces=true&header=true&stream=false&show_border=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:290px;" allowTransparency="true"></iframe>
</center>
<!--HTML End-->
<br/>
<a class="close" href="#">×</a>
</div>
Ganti alamat halaman fanspage saya yang berwana merah dengan alamat halaman fanspage milik Anda.
Anda bisa mengganti pesan yang berwarna hijau dengan pesan menurut selera Anda.
Setelah itu pilih save atau simpan.
Lihat hasilnya.