Kotak Like Facebook Melayang Dengan jQuery

Kotak Like Facebook Melayang Dengan jQuery - Kali ini saya akan membahas bagaimana cara membuat Kotak Like Facebook Melayang Dengan jQuery, maksudnya menampilkan kotak like facebook dengan efek melayang ditambah dengan waktu batas, maksudnya jika waktu tersebut sudah habis maka kotak like facebook yang melayang tadi akan menghilang dengan sendirinya, sebelum membahas bagaimana cara membuatnya silahkan lihat DEMO gambar dibawah ini.

Gimana tertarik untuk membuat widget kaya gambar diatas, jika tertarik silahkan ikuti langkah-langkah di bawah ini :

1. Login ke Blog kamu.

2. Pilih Rancangan.

3. Pilih Edit HTML, jangan lupa Download Template Lengkap Dulu.

4. Cari kode </body>, setelah ketemu latakan kode dibawah ini tepat diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
KNFBFansPRO='BLAZERBLOG'
//]]>
</script>
<style>#fblikepop{background-color:#fff;display:none;position:fixed;top:200px;_position:absolute; /* hack for IE 6*/width:450px;border:10px solid #6F6F6F;z-index:200;-moz-border-radius: 9px;-webkit-border-radius: 9px;margin:0pt;padding:0pt;color:#333333;text-align:left;font-family:arial,sans-serif;font-size:13px;}
#fblikepop body{background:#fff none repeat scroll 0%;line-height:1;margin:0pt;height:100%;}
.fbflush{cursor: pointer;font-size:11px !important;color:#FFF !important;text-decoration:none !important;border:0 !important;}
#fblikebg{display:none;position:fixed;_position:absolute; /* hack for IE 6*/height:100%;width:100%;top:0;left:0;background:#000000;z-index:100;}
#fblikepop #closeable{float:right;margin:7px 15px 0 0;}
#fblikepop h1{background:#6D84B4 none repeat scroll 0 0;border-top:1px solid #3B5998;border-left:1px solid #3B5998;border-right:1px solid #3B5998;color:#FFFFFF !important;font-size:18px !important;font-weight:normal !important;padding:5px !important;margin:0 !important;font-family:&quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, sans-serif !important;}
#fblikepop #actionHolder{height:30px;overflow:hidden;}
#fblikepop #buttonArea{background:#F2F2F2;border-top:1px solid #CCCCCC;padding:10px;min-height:50px;}
#fblikepop #buttonArea a{color:#999999 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;}
#fblikepop #buttonArea a:hover{color:#333 !important;text-decoration:none !important;border:0 !important;}
#fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:22px;padding:8px;background:#fff !important;}
#fblikepop #counter-display{float:right;font-size:11px !important;font-weight:normal !important;margin:5px 0 0 0;text-align:right;line-height:16px;}</style>
<script src='http://mybloggertricks.googlecode.com/files/jquery.js' type='text/javascript'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
<script src='http://mybloggertricks.googlecode.com/files/mbtlikebox2.js' type='text/javascript'/>
<script language='javascript'>
//<![CDATA[
$(document).ready(function(){
$().KNFBFansPRO({
timeout: 30,
wait: 0,
url: 'http://www.facebook.com/BLAZERBLOG',
closeable: true });
});
//]]>
</script>
<div id='fbtpdiv'/>

Ganti kode yang berwarna MERAH  denagn USERNAME Facebook anda.
Dan untukk yang berwarna BIRU waktu yan ditampilkan dalam detik jadi 30 sama dengan 30 detik.
Sebelum disimpan Template nya klik dulu PERTINJAUAN apakah berhasil, jika berhasil baru SIMPAN TEMPLATE.


sumber: blazerracing.blogspot.com