Editor
Selamat siang sobat-sobat semua, pada hari ini penulis akan mencoba share tips dan trik cara memasang fans page facebook melayang di blog. Sebelum lanjut memasang fans page facebook, perlu diketahui dulu bahwa pemasangan widget fans page sangat berpengaruh terhadap jumlah visitor yang suka dengan blog kita. Sehingga pemasangan fans page facebook diperlukan untuk menambah jumlah fans page di blog kita melalui facebook dan ini juga berguna untuk menambah jumlah likers dari teman-teman facebook.
Baiklah, sekarang menuju ke langkah-langkah cara menampilkan widget fans page facebook melayang di blog:
1. Buka www.blogger.com
2. Kemudian ke menu tata letak dan tambah gadget
3. Pilih menu tambah HTML/script, lalu copy-pastekan kode dibawah ini
<style type='text/css'>
/* Message Box */
#box-message {
position:fixed !important;
position:absolute; /* IE6 */
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:250px;
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:20px;
width:20px;
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 -->
LIKE THIS
<center>
<div id="fb-root">
</div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box border_color="" colorscheme="dark" header="true" href="https://www.facebook.com/pages/berbagai-macam-informasi/120680738019238" show_faces="true" stream="false" width="250"></fb:like-box><span class="”fullpost”">
</span></center>
<!-- HTML End -->
<a class='close' href='#'>×</a>
</div>
4. Setelah itu simpan, dan semoga sobat bisa mencobanya
NB: yang bewarna hijau bisa diganti tulisanya yang diinginkan, yang bewarna biru bisa disesuaikan dengan lebar fans page facebook dan yang bewarna merah bisa giganti dengan script fans page facebook sobat.
Semoga bermanfaat, dan jangan lupa bagi yang sudah mencobanya like disini n komentarnya di tunggu ya..:)