Tutorial> una c box perfecta

Ohaiio sekaii como están?? , se que me he desaparecido una vez más, discúlpenme pero la escuela me absorbe, esta semana tratare de estarles publicando lo más que pueda como compensación.
Ha estado lloviendo mucho por aquí, y como ha estado el clima por donde viven??

Este tutorial lo hice al crear este diseño lo he modificado un poco solamente para que se vea mejor que el que tengo, yo he editado los códigos por si publican este tuto darme créditos, como he dicho he EDITADO yo no cree los códigos, es c box esta en base a la c-box deslizante como la que ven ahora en mi diseño. Solo peguen el código en un gadget html javascript:

Oh previas para que lo vean:

Asi se veria si dejan la skin que puse y el boton no se ve en la previa pero es este, esta otra es como se veria como yo la tengo

Ahora si los codigos

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

<a href="javascript:void(0);"onclick="showHideAT()"/><img class= width="50" height="100"src=" http://i1008.photobucket.com/albums/af204/Karyn_Uchiha/boton%20c%20box%20free%20by%20karyn_zpsf75heuwd.png "/></a></div>

<style type="text/css">

#at{

position:fixed;

top:60;

;

}

* html #at{position:relative;}

.attab{

height:100px;

width:50px;

float:left;

cursor:pointer;

background:url();

}

.atcontent{

float:right;

background: url(http://i1008.photobucket.com/albums/af204/Karyn_Uchiha/skin%20c%20box%20free%20by%20karyn_zpsf87btxke.png) no-repeat 0 0 transparent;

width:898px;

height:691px;center scroll ;

padding : 4px; margin-top: 100px; margin-left: 7px;

}

</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 /><div style='float: left; position: relative; margin-top: -20px; margin-left: 500px;background: #ffe9ec; padding: 3px; border-radius: 10px; border: 3px double #f5beb9;'>

C bx aqui!!!

<br />

<center><div id="author"><a href="javascript:void(0);" onclick="showHideAT()"><input style="color: #ffe9ec; background: #fff; border: 2px dashed #f5beb9; 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></div>

EDITA :D

Imagen del boton: aqui pon la url de tu boton para la c box en caso de que quieras cambiarlo

100: alto del boton de tu c box

50: ancho del boton de tu c box

Left: Es el lugar donde se pondra el botoncito de la c box, puedes cambiarlo por right

Skin de la c box: pon la url de la skin o puedes dejar la que puse

Alto y ancho de la skin de tu c box

-20: disminuye este numero y tu c box ira mas abajo, aumentalo y subira

500: si disminuyes el numero la c box se va a la izquierda si lo subes a la derecho

Codigo de tu c box

10: si aumentas el numero se redondea mas las esquinas de la c box en caso contrario se ponen las esquinas

3: tamaño del borde de la c box

Double: tipo de borde de la c box

f5beb9: color del borde de la c box

2: tamaño del borde del boton cerrar

f5beb9: color del borde del boton cerrar

Bueno eso seria todo espeo les haya gustado, nos leemos prontos, espero.
Cuídense
 Bye bye