Floating Facebook Like Box

Lagi-lagi soal facebook, sebuah jejaring sosial yang sudah menjadi bagian dari hidup manusia yang tergila-gila akan dunia maya (seperti adminnya heheheh....).

Yap berbicara mengenai facebook kali ini saya akan memberithukan sedikit trik untuk membuat like box facebook anda menjadi lebih hidup lagi yaitu membuatnya melayang dari atas dengan sedikit kode yang gak perlu ribet untuk memasangnya di blog sobat.

Mau tahu cara pembuatannya ? simaklah beberapa langkah mudah dibawah ini....

Langkah 1 : Masuk ke Menu Rancangan - Tambah Gadget - HTML/JavaScript

Langkah2 : Copy Paste Kode dibawah ini

Code :

<style type='text/css'>
#facebook-box {
position:fixed !important;
position:absolute; /* IE6 */
top: -900px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
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:#6699ff; 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;

#facebook-box 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
$('#facebook-box').animate({bottom:"50px"}, 1000);
// hilangkan kotak pesan saat tombol (x) di klik
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>

<div id='facebook-box'>

Script Like Box Facebook taruh Disini

<a class='close' href='#'>&times;</a>
</div>

Kalau sudah kemudian jangan lupa di  Simpan 

Artikel Terkait Lainnya :