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.
Como hago que quede a un costado? c: gracias
ResponderEliminarMuy buen aporte n_n
Lo actualize :)
EliminarPodría quedar vertical a un costado?
EliminarBuen tutorial! :D
ResponderEliminarYa 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 :)