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 

Cbox deslizante en tu blog [actualizado]

Hola a todos  Bueno dentro de poco me iré y aprovecho para dejaros este tutorial que me pidió Ceila-chan (visiten su hermoso blog) y en fin, trata sobre como poner un chat deslizante como tengo yo en la esquina. Es un tutorial muy facil, comencemos GO Go go!!

Tenemos que tener creado nuestro Cbox. Entonces nos vamos a diseño y vamos a:   

                                       

Una vez en HTML/JAVASCRIPT ponemos este código:

<style>

.boxer {width: 250px;height: 110px; margin-top: -130px;position: fixed;right: 50px;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;z-index: 100;top: 0px;}

.boxer:hover {margin-top: 0px;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;}

.box {width: 246px;background: #fff;padding: 5px;overflow: hidden;height: 130px; font-family: calibri; font-size: 12px; color: #c7c7c7;}

.close {top: 130px;position: absolute;background: #000000;color: #fff ;padding: 3px;width:250px;text-align:center;border-radius: 0px 0px 10px 10px;-moz-border-radius: 0px 0px 10px 10px;-webkit-border-radius: 0px 0px 10px 10px;left: px;}

.close e, .boxer:hover f {display: inline;opacity:.8;}

.close f, .boxer:hover e {display: none;opacity:.8;}

</style>

<div class="boxer">

<div class="close"> <e>C-box</e> <f>¿Alguna duda?</f> </div>

<div class="box">

<center>

Aqui va el código de tu c-box

</center>

</div></div>

Donde pone codigo de tu c-box es donde debe estar el código tu cbox (evidentemente xD)

PARTE A EDITAR:

Color del botón:

Cámbialo por cualquier otro que quieras.

Lado:

Cabia right por left si lo prefieres a la izquierda

Importante:

El C-box debe medir 240px de ancho y 100 px de alto en total.