kotak like facebook melayang

                 
                                assalammualaikum warah matullahi wabarakatu                                                                                                  
                                                                                               

  facebook adalah sebuah website yang dipergunakan untuk bersosialisasi dengan orang lain dan chatingan dengan orang lain 

keuntungan menggunakan facebook yaitu akan memperbanyak teman kita dan menambah ilmu dan berbagi ilmu dengan orang lain

kali ini saya akan membuat sebuah widget yaitu cara membuat kotak like  facebook melayang.      
cara nya sebagai berikut
                                                                         1.log in your website
                                                                          2.klik rancangan > elemen laman 

1.                                                              3.tambah gadget  > HTML/java script
2.                                                               4.masukkan lah kode nya berikut :

1.kotak like facebook originals

<script type="text/javascript"><!-- var persistclose=0 var startX = 100 var startY = 100 var verticalpos="fromtop" function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function get_cookie(Name) { var search = Name + "=" var returnvalue = ""; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search) if (offset != -1) { offset += search.length end = document.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length; returnvalue=unescape(document.cookie.substring(offset, end)) } } return returnvalue; } function closebar(){ if (persistclose) document.cookie="remainclosed=1" document.getElementById("topbar").style.visibility="hidden" } function staticbar(){ barheight=document.getElementById("topbar").offsetHeight var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera; var d = document; function ml(id){ var el=d.getElementById(id); if (!persistclose || persistclose && get_cookie("remainclosed")=="") el.style.visibility="visible" if(d.layers)el.style=el; el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";}; el.x = startX; if (verticalpos=="fromtop") el.y = startY; else{ el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight; el.y -= startY; } return el; } window.stayTopLeft=function(){ if (verticalpos=="fromtop"){ var pY = ns ? pageYOffset : iecompattest().scrollTop; ftlObj.y += (pY + startY - ftlObj.y)/8; } else{ var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight; ftlObj.y += (pY - startY - ftlObj.y)/8; } ftlObj.sP(ftlObj.x, ftlObj.y); setTimeout("stayTopLeft()", 10); } ftlObj = ml("topbar"); stayTopLeft(); } if (window.addEventListener) window.addEventListener("load", staticbar, false) else if (window.attachEvent) window.attachEvent("onload", staticbar) else if (document.getElementById) window.onload=staticbar --></script> <style type="text/css"><!-- #topbar{position:absolute;width: 340px;visibility: hidden;z-index: 100;border: 1px solid #bdccdc;padding: 5px; background-color: #fff; -moz-border-radius:5px; font: 11px Tahoma, arial, Verdana, sans-serif; line-height:16px;} .tolbarclose {cursor:default;} --></style> <div id="topbar"> <div class="iklankotak1" style="padding:0 0 5px 5px;"> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td style="padding:5px 0 5px 3px;" valign="top" width="50%"> <span style="font-size:14px; font-weight:bold;">Welcome!</span> </td> <td align="right" style="padding:0;" valign="top" width="50%"> <a class="tolbarclose" href="#" onclick="closebar(); return false" rel="dofollow"><img alt="close" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNT8AijQ00tyBPyP6cP-s0yy2wg4_ybEPf-atOAEWWsqwt99MFcgCS8zcM3u4h5UW2DQwmJCw7H_BW2dggqWS7OFHJi2rm2QB9977YWNg1A4HsCjrqJI8omrTmscw-CzmSdMKeAgpCDaM/?imgmax=800" /></a> </td> </tr> <tr> <td colspan="2" valign="top"> <!-- Isi Widget melayang --> isi kode like facebook kamu disini <!-- Isi Widget melayang --> </td></tr> </table> </div> </div>

2. kotak like facebook berefek bounce

<style type='text/css'> #kotak-facebook { position:fixed !important; position:absolute; /* IE6 */ bottom:-1000px; 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:#eee2e2; 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'> <--------KODE SCRPIT LIKE FACEBOOK DI SINI---------> <a class='close' href='#'>×</a> </div>