Cara Membuat Like Box Facebook Melayang di Blog

Selamat hari Blogger :)

kali ini saya akan membagikan trik,  khusus nya bagi para blogger / pengguna web , 
yaitu cara membuat Like Fan page facebook box melayang di blog atau jika di artikan secara bebas adalah kotak yang akan muncul ketika blog kita didatangi pengunjung dan meminta agar fan page kita di like , seperti gambar di bawah contoh nya


jika benar itu yang kamu cari maka kamu sudah di pastikan berada di tempat yang tepat. hehehe






langsung ke TKP

cara membuatnya :
1. Login ke halaman Blogger Sobat
2. pilih salah satu blog yang ingin kamu pasang fan page melayang, seperti contoh gambar di bawah , lalu klik seperti yang saya beri tanda kotak merah untuk masuk ke halaman dashboard blog kamu .
3. klik tata letak
4.klik tambahkan Gadget
5.maka akan terbuka windows baru, kemudian  pilih / klik tanda plus ( + )
6. Lalu akan terbukan tampilan seperti ini
7.paste kan kode berikut ke dalam  kotak konten, seperti gambar di ata
<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/Peluang-Bisnis-Online/1439133676392486?fref=ts?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>
</div>


8.ganti URL yang berwarna merah di atas / yang berada di dalam kotak CCS dengan URL fan page facebook kamu.
url adalah yang seperti ini --------------------------v



9.kemudian simpan. 

 restart halaman blog kamu lalu liat hasilnya

Cukup sekian dari saya , semoga bermanfaat. Terima kasih
Diposkan oleh