1
Tutoriales y Tips SMF / Xat desplegable [Tutorial]
« on: October 04, 2013 - 08:53 08:53 »
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:
Bien ya por ultimo nos dirigimos al css de nuestro tema y al final añadimos este codigo
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
- 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