Cara Membuat Widget Like Box Facebook Melayang

Published by Kurnia Septa Sabtu, 07 Desember 2013

Ingin mendapatkan jumlah like (suka) halaman facebook blogmu lebih banyak? Ada banyak cara, salah satunya memasang widget like box yang disediakan oleh facebook plugins dengan model melayang (float). Jangan khawatir widget ini akan menganggu pembaca setia blogmu, karena meskipun melayang ada tombol close untuk menghilangkan widget like box itu.

Widget like box facebook jika dipasang di blog, ini untuk mempromosikan halaman facebook. Jika suka dengan blog kita, pembaca tidak akan ragu untuk mengklik like (suka). Sesekali untuk pirode tertentu kita bisa pasang widget like box facebook melayang ini di blog agar like (suka) berjumlah, begitupun dengan kunjungan ke halaman facebook blog kita.

Cara Membuat Widget Like Box Facebook Melayang di Blog
1. Login ke blogger.com
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<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/kurniaseptadotcom?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>

5. Ganti kode yang warna merah dengan URL halaman Facebook kamu.
6. Simpan jika sudah selesai.

Sama seperti mengelola blog, mengelola halaman facebook juga harus kreatif. Ingat, konten adalah raja, jangan hanya memakai halaman facebook untuk memposting feed blog. Berikan informasi yang menarik sesuai dengan tema konten blogmu.