slider

C-box ¿Alguna duda?
Aqui va el código de tu c-box

Top comentaristas

sábado, 1 de junio de 2013

Chat escondido


Hola, tengo un montón de entradas para publicar pero estoy feliz  Estuve en la piscina y ahora ando comiendo tarta. En fin, el tuto trata sobre una imagen al lateral del blog, que al pulsarla sale el cbox. Pueden verlo en el blog de pruebasEste tutorial lo pidio Takuya asi que GO, Go, go! (cuanto tiempo sin decirlo)


Para empezar ponemos en un gadget:
<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 QUE SERA EL BOTON') 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 AQUI
<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>

Nota, verán que en el blog de pruebas no sale la imagen entera por eso os recomiendo que no sea muy grande. Y esto es todo... de momento 
Pensando: Mente en blanco, la tarta está muy fria

12 comentarios:

  1. Muchas gracias :DD lo probaré cuando ande con tiempo:33 saludos

    ResponderEliminar
  2. Kyaaa que bello!! :3

    Saludos y se cuida!!

    ResponderEliminar
  3. waa la tuto se parece mucho a la mia jejej pero es diferente!!
    jaja te quedo genail!
    saludos!

    ResponderEliminar
  4. Esta muy padre!!! Gracias por el tutorial *-*

    ResponderEliminar
  5. gracias de ante mano, pero tengo un inconveniente, ¿el CBOX, la caja de cual quier cosa que yo quiera agragar?, le he puesto la de un formulario y se muestran todos los codigos, gracias.

    ResponderEliminar

Tutoriales Recursos
Descargas Afiliados
Afilianos Reflexiones
Dibujo Historias