slider

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

Top comentaristas

domingo, 12 de mayo de 2013

Cbox deslizante en tu blog [actualizado]


Hola a todos  Bueno dentro de poco me iré y aprovecho para dejaros este tutorial que me pidió Ceila-chan (visiten su hermoso blog) y en fin, trata sobre como poner un chat deslizante como tengo yo en la esquina. Es un tutorial muy facil, comencemos GO Go go!!


Tenemos que tener creado nuestro Cbox. Entonces nos vamos a diseño y vamos a:   
                                       

Una vez en HTML/JAVASCRIPT ponemos este código:
<style>
.boxer {width: 250px;height: 110px; margin-top: -130px;position: fixed;right: 50px;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;z-index: 100;top: 0px;}

.boxer:hover {margin-top: 0px;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;}

.box {width: 246px;background: #fff;padding: 5px;overflow: hidden;height: 130px; font-family: calibri; font-size: 12px; color: #c7c7c7;}

.close {top: 130px;position: absolute;background: #000000;color: #fff ;padding: 3px;width:250px;text-align:center;border-radius: 0px 0px 10px 10px;-moz-border-radius: 0px 0px 10px 10px;-webkit-border-radius: 0px 0px 10px 10px;left: px;}
.close e, .boxer:hover f {display: inline;opacity:.8;}
.close f, .boxer:hover e {display: none;opacity:.8;}

</style>

<div class="boxer">

<div class="close"> <e>C-box</e> <f>¿Alguna duda?</f> </div>

<div class="box">

<center>

Aqui va el código de tu c-box

</center>

</div></div>


Donde pone codigo de tu c-box es donde debe estar el código tu cbox (evidentemente xD)


PARTE A EDITAR:

Color del botón:
Cámbialo por cualquier otro que quieras.

Lado:
Cabia right por left si lo prefieres a la izquierda

Importante:
El C-box debe medir 240px de ancho y 100 px de alto en total.


5 comentarios:

  1. Como hago que quede a un costado? c: gracias
    Muy buen aporte n_n

    ResponderEliminar
  2. Buen tutorial! :D
    Ya te afilié!
    Podrás ver tu botón en: http://residentefriki.blogspot.com.ar/2013/04/afiliados.html
    Avisame cuando me afilies!
    Muchísimas gracias por tu comentario :)

    ResponderEliminar
  3. buen tuto!! querido ningun problema en hacernos publicidad, se supone que debias pedirla aqui
    http://sakusekai.blogspot.com/2012/12/avisitos-importantes.html

    si no, no era valida pero por ser tu y por que es la primera tanda de publicidad que habra en mi blog lo dejare pasar :D cuando quieras renovar recuerda muy bien ir a esa entrada y leerla para que sepas como puedes renovar... ah mi botoncito de publi es este!

    http://i977.photobucket.com/albums/ae257/sakuyita20/cosas%20de%20mi%20blog/publicidadsaku_zpsc0b5de4a.jpg

    Me pasare pronto para ver si esta mi botoncito saludos!!!

    ResponderEliminar

Tutoriales Recursos
Descargas Afiliados
Afilianos Reflexiones
Dibujo Historias