[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

15 comentarios:

  1. sta buenisimo....
    ame el diseño de tu bloggie :DD

    ResponderEliminar
  2. Hola Dayi: Aunque de esto no entiendo ni j (como decimos acá en Buenos Aires cuando no entendemos nada) me parece divertido! Me gustan tus cositas. Te dejo un besito =)

    ResponderEliminar
  3. n.n yo tengo uno con imagen en la barra lateral n.n pero creo ke hare un tuto y lo kitare pk no me convence

    ResponderEliminar
  4. okis pues al final usare tu recomendacion pero el martes o el miercoles ke hay huelga general n.n asi tengo mas tiempo

    ResponderEliminar
  5. *oo*
    mil gracias por comartir ese mega trucasoo
    ^^
    linda besos

    ResponderEliminar
  6. Dayi Muchas gracias!! Te gustaria ver mi blog? te dejo el link: http://laotakufranciscazamorano.blogspot.com/

    Muchas Gracias!! Saludos, Cuidate!!

    ResponderEliminar
  7. Excelente!! Muchas gracias Dayi!!
    besitos!
    Ja ne~♥

    ResponderEliminar
  8. Dayi perdón yo tengo blogskin como lo pongo??

    ResponderEliminar
  9. Dayi lo puse revisa mi blog y mandame un mensaje si te gusto

    ResponderEliminar
  10. Holiiitaaa!!! Utiliceeee este tutorial y si ves mi página veras como me ha quedado no se como arreglarlo D: lo dejo puesto para que lo veas, por favor pásate y míralo es que soy nueva y no se como cambiarlo D: y me estoy volviendo loca :'(
    Por cierto amoooooooooo tu blooog es super cuteeee!!!

    ResponderEliminar

Puedes dejar cualquier tipo de comentario(*≧m≦*)Pero si el comentario no es de gusto del blog sera borrado..
No insultes.
No spam(;¬_¬)
Si tienes algo que decirme privado:
dayi123466@gmail.com