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