23 de enero de 2013

Tuto: cbox deslizante

Screen_shot_2011-06-17_at_11.41.33_am_large

Hola, holaa (:

Ya que me pidieron como poner una cbox deslizante y por desgracia el blog en el que lo explicaban ha sido eliminado, os dejo los códigos aquí...


Ve a diseño y allí añade un gadget. Pega el código siguiente en un gadget HTML:

<style type="text/css">

#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:400px;
width:150px;
float:left;
cursor:pointer;
background:url('LA URL DE TU IMAGEN') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 150-w) : moveGB(170-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

EL CÓDIGO DE TU CBOX

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (140-gb.offsetWidth).toString() + "px";
</script>

Donde está el código en azul, puedes cambiar los colores, estilos y tamaños del cuadro.
Y guardas y ¡listo!

Creo que eso es todo, si hay algún problema con los códigos o así comenten ;)

Un beso Shiners ;)

Creditos a Annyz.

15 comentarios:

  1. graciaaaaas por fin he conseguido ponerlo, pero como puedo hacer para que salga en la parte de arriba y no en la derecha?

    ResponderEliminar
    Respuestas
    1. me parece, que en vez de "left" (donde esta puesto en azul) tienes que poner "top"..
      no estoy muy segura xD jaja prueba y me dices ;)
      besos ^^

      Eliminar
  2. Me mola lo de la cbox que se desliza, pero eso cómo queda? cómo el tuyo? se puede cambiar? o qué? xD

    ResponderEliminar
    Respuestas
    1. si, mas o menos :3
      y lo puedes modificar todo lo que quieras xD
      un besoo♥

      Eliminar
  3. Respuestas
    1. ¿La imagen que aparece DONDE?

      Eliminar
    2. cuando le das encima te aparece la cbox, no es tan complicado ><

      Eliminar
    3. ¡Gracias, Shiny! Por cierto, acabo de poner un Concurso de San Valentín, si te interesa ya sabes donde encontrarme.

      besos y Gracias ^^

      Eliminar
  4. Gracias por ponerlo ,ahora lo pongo en mi blog;)

    ResponderEliminar
  5. Hola shiny!!!!
    Oh... me gusta mucho el nuevo diseño del blog y todo:)
    Ajajaj que buena idea.
    Gracias por los consejos, linda!
    Besos:*

    ResponderEliminar
  6. QUE buena.. onda!!
    la verdad me gusta la idea.. lo malo es que el cbox te quita comentarios
    asi que mejor no lo coloco

    pero grax :D

    que tengas un buen dia
    o noche, o cuando leas
    esto XD kiss :3

    ResponderEliminar
  7. hola guapa!!! , hahah muchas gracias por la entrada y nada que hacia ya mucho tiempo que no pasaba por aquí así que te dejo mi comentario una felicitación muy grande porque me encanta la decoración de tu blog,te habrá costado lo tuyo, muchísimos besitos, cuídate ^^

    ResponderEliminar

Gracias por comentar, cada uno de los comentarios me saca una sonrisa, así que ya sabes, ¡no te cortes!
Cualquier duda, pregunta, sugerencia... ¡aquí!
Recuerda comentar con respeto. Cualquier comentario que sea irrespetuoso será automáticamente eliminado.
(SIEMPRE DEVUELVO COMENTARIOS EN LOS BLOGS♥) besitos