Chat escondido

Hola, tengo un montón de entradas para publicar pero estoy feliz  Estuve en la piscina y ahora ando comiendo tarta. En fin, el tuto trata sobre una imagen al lateral del blog, que al pulsarla sale el cbox. Pueden verlo en el blog de pruebas. Este tutorial lo pidio Takuya asi que GO, Go, go! (cuanto tiempo sin decirlo)

Para empezar ponemos en un gadget:

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:400px;
width:150px;
float:left;
cursor:pointer;
background:url('LA URL DE TU IMAGEN QUE SERA EL BOTON') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 150-w) : moveGB(170-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">
EL CÓDIGO DE TU CBOX AQUI
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (140-gb.offsetWidth).toString() + "px";
</script>

Nota, verán que en el blog de pruebas no sale la imagen entera por eso os recomiendo que no sea muy grande. Y esto es todo... de momento 

Pensando: Mente en blanco, la tarta está muy fria

Deja tu comentario (Chat) + Pedido de Mia

Hola a todos  Hoy tengo un tutorial muy facil. Para la gente con un chat normal. Es decir sin ningun efecto. Le pondremos una imagen entre el chat y el formulario:

Nuestro chat debería ser así:

<!-- BEGIN CBOX - www.cbox.ws - v001 -->

Aqui codigo de los mensajes</div>

<div>Aqui codigo de la cajita</div>

<!-- END CBOX -->

Solamente haremos esto:

<!-- BEGIN CBOX - www.cbox.ws - v001 -->Aqui el codigo de los mensajes</div>
<img src="Aqui la url de tu imagen"><img src="aqui la url de tu icono">
<div>Aqui codigo de la cajita</div><!-- END CBOX -->

Y ya está, si quieres puedes quitarle la imagen del icono y solo el nombre. Aqui os dejo unos logitos:

Espero que te haya gustado el tutorial. ¡Hasta pronto!

Hablando de chats, Mia me pidio un pedido para su blog (clic para verlo) Se trata de una imagen para chat:

Si no te gusta no me importa que no lo pongas en tu blog, tranquila :)

Me la pidio hace dos dias siento si he tardado mucho. He estado viendo algunas firmas, están muy bien. Recuerden que quedan unos 7 días. Por cierto, deben poner el banner o entrada en sus blogs o no entraran en el concurso.

Siento ser tan malo