Cara memasang like box dan membuat likebox melayang diblog

Tentunya sudah tidak asing lagi dengan widget like box kan, yap! widget yang menampilkan Fanspage facebook di blog. Biasanya Widget ini digunakan oleh pemilik blog untuk menambah Like pada Fanspagenya.

Cara Memasang Like Box Melayang :

1. Login ke blogger.com

2. Pilih menu "Tata Letak"

3. Klik "Tambahkan Gadget" Terserah yang mana aja boleh, soalnya widget ini float (melayang).

4. Pilih "HTML/Javascript".

5. Masukkan kode dibawah ini.

<!-- Script by: http://tipsdariherpet.blogspot.com/ -->
<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/Kreasibocah?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>
<p style=" float:right; margin-right:35px; font-size:10px;" >Powered By <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://tipsdariherpet.blogspot.com/">Facebook</a> and <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://tipsdariherpet.blogspot.com/2015/01/cara-membuat-likebox-melayang-diblog.html">Get This Widget</a></p>
</div>
<!-- Script by: http://tipsdariherpet.blogspot.com/ -->

6. Ganti yang berwarna Merah dengan URL Fanspage Facebook kalian.

7. Klik "Simpan"

Tentunya sudah tidak asing lagi dengan widget like box kan, yap! widget yang menampilkan Fanspage facebook di blog. Biasanya Widget ini digunakan oleh pemilik blog untuk menambah Like pada Fanspagenya.

Bagi yang ingin like boxnya tidak terbang:

1. Login ke Facebook dengan akun kamu.
2. masuk ke developers facebook,klik disini
3. Atur Tampilan.
Masukan URL halaman blogspot sobat di Facebook.
Width, atur lebar Widget.
Height, atur panjang Widget.
Show Faces, menampilkan foto Profil Likers atau tidak.
Color Scheme, pilih antara dark atau light.
Stream, tampilkan ringkasan halaman Facebook atau tidak.
Border Color, tentukan warna garis luar.
Show header, tampilkan header atau tidak.
4. Setelah selesai klik Get Code untuk mendapatkan kode HTML widget Like Box.

5. Mendapatkan kode html Like Box, agar lebih mudah masuk pada bagian iFrame. Coppy seluruh kodenya.

6. Selanjutnya, masuk pada akun Blogger sobat.
7. Masuk pada bagian Tata Letak.
8. Kllik tambah gadget, pilih posisi mana yang sobat inginkan untuk memasang Widget Like Box.
9. Pilih HTML/Javascript.
10. Pastekan kode iFrame dan klik simpan.