Seleccionar idioma:
Realizar Donación - Mods Premium - Portfolio



Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.
* Xat desplegable [Tutorial]
  Leído 1572 veces
* Viendo el foro
 0 Usuarios y 1 Visitante están viendo este foro.


*
Autor: celu
Sep 11 2013
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:

Código: [Seleccionar]
<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

Código: [Seleccionar]
#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 tutiroai lque vi en youtube de no me acuerdo quien (?) soporte en enix.x10.mx/forum y smfpersonal.net, no distribuir el tutorial***

Salu2... celu ;)


« Última Modificación: Septiembre 12, 2013, 01:57:05 pm por celu »



Interesante el tutorial... por mi parte me gustaria que si yo lo dejo abierto y abro otro link, deberia seguir abierto el chat.

Gracias por el aporte.




hecho por vos? mmmm..... Yo ese mismo codigo lo vi hace rato y el que lo hizo fue enik http://www.smfpersonal.net/soporte/como-implementar-xat-a-la-izquierda-deslizante-smf-t6499.0.html;msg43072#msg43072

Por etica cuando uno toma el codigo de otro y lo pone en un mod/theme/tutorial DEBE poner los creditos correspondientes (Por mas que digas que lo editaste un poco)




Buen, tutorial. Gracias por aportar.




Gracias a todos por los comentarios :)

Lucas-ruroken: Cuando posea mas conocimientos de jquery, css, html y php creare un mod y lo pondre para que no se quite como tu dices :)

Heracles: Yo ese tutorial lo encontre en un video de youtube que estaba en brasileño hace tiempo y no he puesto que el codigo fuese mio, lo que he puesto esque lo he editado un poco, por ejemplo el css lo he editado para que quede mas elegante ;)




Por mas que lo hayas visto en un video no es tu codigo, por lo tanto tenes que poner los creditos correspondientes.
Autor: bla bla bla
Modificado por mi bla bla

Es una cuestion de respeto por el trabajo de los demas.

Es como cuando vos hagas el mod que decis, yo mire el codigo y haga un tutorial diciendo o dando a entender que es mio, sin darte ni medio credito por tu trabajo.




Bueno si tanto te importa ya edite el mensaje




Otros temas de su interes




Usuario:
Contraseña:
Sesión:
hermes bracelet replica, christian louboutin replica, van cleef and arpels replica, red bottoms replica, cartier love bracelet replica christian louboutin replica, christian louboutin replica, hermes bracelet replica,