¿Como poner un Cbox que sea flotante y deslizante?

|| ||

Holi!Si yo aquí Larita Itzumiki
he desaparecido por un tiempo ya que no tenía tiempo y estoy disfrutando un poco antes de que empieze la escuela.
Hoy decidí dejarles este tuto...Empezemos!



¿Como poner un Cbox que sea flotante y deslizante?

Bueno para que nuestro blog no tenga un 
gadget más podemos ahorrar espacio haciendo esta manera de CBOX....Este modo es el de las imagenes principales!
Vamos a Diseño // Añadir un gadget // HTML/Javascript.
En nuestro gadget pegamos 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 Principal"/></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 SKIN DEL C-BOX) 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 />
Pon aquí el CODIGO DE TU C-BOX
<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 editamos lo marcado:

URL Principal: URL de la imagen que dirá CBOX 

URL SKIN DEL C-BOX: la Url del skin que tendrá

Verás una linea resaltada : 

color: #bbb; background: #fff; border: 2px dashed #fcc; cursor: nw-resize;

esta misma es para editar el boton de cerrar,editemoslo :

#bbbcolor del texto.
#fffcolor de fondo.
border: tamaño, estilo & color del borde. {aprende a editar aquí}
cursor: tipo de cursor que aparece sobre el mismo. {aprende a editar aquí}

Les dejo skins para utilizar!(recolectados)








Bueno espero que les haya servido!Cualquier duda me dejas tu comentario!
Recuerda que si te gustó dejar un comentario!
BESOTES!
(PD:Tengo que hacer la fimra pero ya me tenía que ir!)

Escrita por: Larita Itzumiki
Te gusto esta entrada? 
Si te ha gustado dejame ese lindo comentario!Y si eres un pasajero sigueme y no te pierdas la otra!

1 comentario:

Tu comentario me haría muy feliz!! :D