martes, marzo 17, 2015

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

No hay comentarios:

Publicar un comentario