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>

cara membuat buku tamu keren

buku tamu ialah chatting pada website sebelum kamu mengkopi script dibawah ini kamu
harus membuat account di cbox , shoutmix , myshoutbox ,freeshoutbox ,sbox, busuk dan penyedia chatting gratis lainnya
* cara mengkopi  yaitu :

1. log in your website
2. klik rancangan > elemen laman 
3. tambah gadget  > HTML/java script
4. masukkan lah kode nya berikut :

<div class='widget-content'>
<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyJWqAMeVdE1wPTpgZAgoO2A10pR7MoQdAKLUldL39bJNODTtDRGeyPPuvhlwqfvAnbU_dFSwpyFa9UBOZD9lrsvelAtqAgCb4l7GpmbOa5JkDUN9q7bhrgZJCMzIbQ7bguwoHxHMe5IkN/s128/345o85i.gif ') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="305" src="http://www7.cbox.ws/box/?boxid=502545&amp;boxtag=pppww3&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-502545" style="border:#ababab 1px solid;" id="cboxmain7-502545"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=502545&amp;boxtag=pppww3&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-502545" style="border:#ababab 1px solid;border-top:0px" id="cboxform7-502545"></iframe></div>
</div>
<!-- END CBOX -->

<div style="text-align: right; font-size: 10px;">
Widget by
<a href="

http://indramh.blogspot.com

">
indra mh
</a>
</div>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
</div>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=5991480736744026339&widgetType=HTML&widgetId=HTML8&action=editWidget&sectionId=main' onclick='return _WidgetManager._PopupConfig(document.getElementById("HTML8"));' target='configHTML8' title='Edit'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>