Cbox que se desliza

Holis hermosa  como estas? espero que bienn..

pues bueno traigo este tuto porque muuuchas personas me lo han pedido y se lo hare facil, el tuto es para tener el cbox igualito que le mio, es tener una imagen del lado izquierdo en la parte superior que la apretas y en el medio aparece tu Cbox deslisandoce muyyy bello, TU SOLO TENDRAS QUE CAMBIARLE LAS IMAGENES para que no me copien amii :D

TE MOSTRARE EL GRAFICOS COMO SE VERIA

1:

2:

 Bueno ahora lo que haras sera:

Ir a:  Diseño  Añadir Gadget  HTML javascript

 y pegaras el siguiente codigo:

<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 U IMAGEN PARA ABRIR TU KAWAIIOSO CBOX"/></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 DE TU BELLO 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 />

CODIGO DE TU BELLO CBOX

<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>

Ahora a editar!
Donde dice Url de tu imagen para abrir el Cbox: tu pondras la url de la imagen que queiras que este para cuendo le des clik se habra tu cbox. (NO COPIES MI IMAGEN)
Donde dice Url de el fondo para tu cbox: Pondras la imagen que estara detras de tu cbox.
Donde dice: Codigo de tu cbox: Pues pondras el codigo completo de tu cbox
y ya guardalo y tienes muy kawaii tu cbox: 
Ahora te dejo algunas imagenes para abrir el cbox:

 bueno las diseñe yo no le quites mi firma si la usas! plis
si sabes diseñar y queires diseñar el fondo para tu cbox te dejo las medidas:
387 x 381 :D
para que tu cbox entre en el fondo tiene que medir:
20 x 20
eso es todo espero que te halla servido el tuto besitossssssss sabor a miel :D


By: AnitaWorld