Chat Deslizante

Hoy les voy a enseñar a como hacer  un chat deslizante n.n

sería como el que tengo yo ahora:
clic a la imagen para verla en tamaño original...

Vamos a diseño, añadir un gadget, html/javascript

pegamos el siguiente código...

<div style='display:scroll; position:fixed; top:0px; left:10px;'>

<a href="javascript:void(0);"onclick="showHideAT()"/><img class= width="220" height="220"src="url de tu icon chat box"/></a></div>

<style type="text/css">

#at{

position:fixed;

top:0;

;

}

* html #at{position:relative;}

.attab{

height:100px;

width:30px;

float:left;

cursor:pointer;

background:url();

}

.atcontent{

float:right;

background:url(url del fondo (o skin) de tu cbox) no-repeat 0 0 transparent;

width:800px;

height:460px;center scroll ;

padding:56px 0 20px 5px;

}

</style>

<script type="text/javascript">

function showHideAT(){

var at = document.getElementById("at");

var w = at.offsetWidth;

at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);

at.opened = !at.opened;

}

function moveAT(x0, xf){

var at = document.getElementById("at");

var dx = Math.abs(x0-xf) > 25 ? 35 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

at.style.top = x.toString() + "px";

if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}

}

</script>

<div id="at">

<div class="attab" onclick="showHideAT()"> </div>

<div class="atcontent">

<div align="center">

<div style="background:url() no-repeat;">

<br /><br /><br /><br /><br /><br />

AQUI EL CODIGO DE TU C-BOX !!

<br />

<center><div id="author"><a href="javascript:void(0);" onclick="showHideAT()"><input style="color: #bbb; background: #fff; border: 2px dashed #fcc; cursor: nw-resize;" type="button" value="Close" class="close" />

</a></div>

</center></div>

</div>

<script type="text/javascript">

var at = document.getElementById("at");

at.style.top = (-200-at.offsetWidth).toString() + "px";

</script></div></div>

amarillo: distancia de la imagen de chat box de la parte de arriba del blog. ahi como ven dice "left" eso significa que la imagen estará en la parte izquierda del blog, pueden dejarlo así o poner "right" que significa derecha, así estará en la parte derecha del blog, y ahi esta puesto que estará a 10px de distancia de la derecha del blog.

naranja: ancho y alto de la imagen de chat box

rojo: url de la imagen de chat box

verde: url del fondo (o skin) del cbox

celeste: tamaño de la skin de tu cbox

azul: reemplazas eso por el código de tu cbox

lila: lado en donde va a flotar la cbox con su skin

right es derecha
left es izquierda
center es centro

rosa: valores del boton de cerrar. el "close" marcado con rosa lo pueden reemplazar por la palabrita que quieran que aparezca en el boton para cerrar, por ejemplo "cerrar", "clic aqui para cerrar", etc.

Consejo: el gadget colóquenlo en la parte del fondo del blog, como en esta imagen:




Cualquier dudita o preguntita comenten n.n

Nos vemos en la próxima entradita, chao chao! :3


Crédito por el código y la imágen: Mell Blog!