Memasang Widget Like Box Facebook Melayang di Blog

Postingan malam kali ini adalah tentang "Memasang Widget Like Box Facebook Melayang di Blog".  Maksudnya, Memasang Widget Like Box Facebook Melayang di Blog pengunjung diminta agar mengklik suatu kotak apakah ia mau menyukai halaman facebook kita maupun bukan sekedar (tombol Close).

Tujuan Memasang Widget Like Box Facebook Melayang di Blog
Pada dasarnya tujuan Memasang Widget Like Box Facebook Melayang di Blog ialah agar para pengunjung blog mau menyukai halaman facebook yang kita kelola beserta memberikan jempolnya, sehingga halaman halaman facebook yang anda kelola makin banyak. keunggulan yang lain atas Widget ini dilengkapi beserta tombol close sehingga pengunjung dapat dengan gampang tutup Kotak Widget ini serta walaupun  agak sedikit mengganggu pengunjung namun masih tetap dapat menutupnya tanpa ada susah payah.

Penasaran ingin Memasang Widget Like Box Facebook Melayang di Blog anda? Ikuti langkah-langkah dibawah ini:

1. Syarat khususnya : mempunyai suatu Halaman Facebook. Bila belum ada, silahkan anda membuat dulu.
2. Buka Akun Blog yang anda kelola.
3. dalam Dasbor Blog anda, masuklah ke Elemen Tata Letak, pilih Add Widget / Tambah Gadget
4. terus pilih HTML/Jawascript
5. kemudian copylah kode script di bawah ini ke Widget/Gadget yang anda buat.

<!-- FB melayang tombol close --!>
<style type='text/css'>
#kotak-facebook {
position:fixed !important;
position:absolute; /* IE6 */
bottom:-1000px;
right:40%;
margin:0px 0px 0px -182px;
width:310px;
height:auto;
padding:16px;
-webkit-box-shadow: 0px 0px 7px #222;
-moz-box-shadow: 0px 0px 7px #222;
box-shadow: 0px 0px 7px #222; background-color:#FFFFFF; font:normal 1em Cambria,Georgia,Serif;
color:#111;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;}
#kotak-facebook a.close {
position:absolute;
top:-10px;
right:-10px;
background:#333;
font:bold 16px Arial,Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#fff;
border:2px solid #fff;
-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;
cursor:pointer;
}
</style>
<script type='text/javascript'>
$(window).bind("load", function() {
// animasikan nilai top saat halaman telah selesai dimuat
$('#kotak-facebook').animate({bottom:"50px"}, 1000);
// hilangkan kotak pesan saat tombol (x) di klik
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='kotak-facebook'>
<p style=" margin-right:10px; font-size:15px; color:#000000;">Please Bantu Saya,<blink> Like This !!!</blink> </p>
<!-- Mulai --!>

<div class="fb-like-box" data-href="https://www.facebook.com/NongkronglDiKedaiKopi" data-width="292" data-show-faces="true" data-stream="false" data-show-border="true" data-header="true"></div>

<!-- Selesai --!><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://kumpulan-adsen.blogspot.com/">Blogger Widget</a> and <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://bos-tutorial.blogspot.com/2013/07/inilah-memasang-widget-like-box.html">Get This Widget</a></p>
</div>

6. Simpan Widget
7. Lohat lah hasilnya

Catatan : yang warna merah ganti dengan kode halaman facebook anda