Xat desplegable [Tutorial]

Con este tutorial propio realizado por mi aprendereis a poner un chat en vuestro foro tipo http://enix.x10.mx/forum

 - Lo primero para facilitar el proceso necesitamos el mod de global headers and footers, lo podeis descargar desde aqui http://custom.simplemachines.org/mods/index.php?mod=351

- Una vez lo hayan instalado en vuestra administracion se dirigen a configuracion del.. -> Global headers and footers y en global head content agriegan este codigo:

Por favor dale puntos al temas antes de ver el codigo

Code: [Select]

<script  type="text/javascript">
  function showHideGB(){ var gb =  document.getElementById("gb");
  var w = gb.offsetWidth; gb.opened ?  moveGB(0, 47-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.left = x.toString()   "px";  if(x0!=xf){setTimeout("moveGB(" x ", " xf ")", 10);} }
  </script> 

  <div id="gb"><div class="gbtab"  onclick="showHideGB()"></div><div class="gbcontent"><div style="line-height:0;background-position:center;width:590px;height:310px;"><embed  align="middle" allowscriptaccess="sameDomain" flashvars="id=190978361""  height="310" name="chat" pluginspage="http://xat.com/update_flash.shtml"  quality="high" src="http://www.xatech.com/web_gear/chat/chat.swf"  type="application/x-shockwave-flash" width="590"  wmode="transparent"/> </div></div></div>

Donde ponen id=190978361 cambian ese numero por la id de vuestro xat

Bien ya por ultimo nos dirigimos al css de nuestro tema y al final añadimos este codigo

Por favor dale puntos al temas antes de ver el codigo

Code: [Select]

#gb{
position:fixed;
top:150px;
z-index: 1000;
left:-610px; }

* html #gb { 
 position:relative; } 

.gbtab {
height:161px;
width:47px;
float:right; 
cursor:pointer;
background:url('http://imagespain.x10.mx/image.php?di=MWH5')  no-repeat;
margin-top:20px; }

.gbcontent {
float:left;
background:#fff;
border:1px solid  #2063FF;
-moz-opacity: 0.80;
filter:  alpha(opacity=80);
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px; 
-khtml-border-radius: 20px;
padding:8px; }
Y listo ya tenemos nuestro xat desplegable, asi es como queda:

Tutorial y css editado by celu gracias a un tutorial lque vi en youtube de no me acuerdo quien (?) soporte en este mismo post, no distribuir el tutorial***

Salu2... celu

Por favor dale puntos al tema si te ha gustado