[TUTORIAL]Poner cbox oculto con una imagen(como el mio)

Hola!!

Bueno hora de tutoriales!!!Esta vez les doy a ensenar como poner su cbox oculto con una imagen!!!

Como el mio....Esto me lo llevan preguntado varias chicas..sorry por no hacerlo al instante..Bueno les dejo una imagen para que tengan una idea!!!

Bueno es simple y facil>.<

Sigue estos pasos:

Luego que hayas hecho tu CBOX....

Vas a:

Diseno>>>agregar un gadget>>>HTML/JAVASCRIP

Y pegas este codigo:

center>
<style type="text/css">
#at{
position:fixed;
right:250px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:none;
background: repeat-x bottom center scroll ;
-moz-border-radius:20px;
padding:10px;
}
</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;">
<div style="text-align: center;">
CODIGO DE TU CBOX</div>
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><div >
<span ></span></div></a></div>
</div></div>
<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>
<a href="javascript:void(0);"onclick="showHideAT()"/><img class="expando" src="GIF O IMAGEN" alt="PUSH" title="Click"style='position:fixed; top:0; right:50px;'/></a></div></center>

Editar:

ANARANJADO:Lo que esta anaranjado es lo que tienes que editar!!!

Para la imagen o gif, Te recomiendo que sea,pequena como la mia,o como la tenia antes!!!

Puede ser png(renders)!!!Recuerda que es la URL de la imagen,aqui  puedes conseguir ese codigo:imageshack...

Si quieres una imagen como la mia,dimelo en los comentarios o en pedidos!!!

Espero que os guste!!!

Si pasa algun problema me preguntan!!

oka,hasta aqui dayi!!Hasta la otra entrada!!

att:dayi