Caja Flotante lateral para colocar chat, y todo lo que imagines.

Hola amigos jimderos, este nuevo truco que les traigo es una caja flotante lateral para colocar un chat online en tu pagina jimdo, tambien imagenes, codigos html, demos de tus nuevos post, iframes de tu facebook, twitter, y mas, usalo como imagines, te dejo el codigo para jimdo o cualquier pagina  web.

 

Ya sabes lo encontrastes primero en disemucho.jimdo.com, compartiendo lo mejor.

Espero comenten mucho para seguir posteando nuevos trucos.

Besos Juana Esthela.

Este codigo en el head

<script type="text/javascript" src="http://disemuchonet.blogcindario.com/ficheros/jquery-1-4-2-min.js">
</script>

<script type="text/javascript">
//<![CDATA[
var j = jQuery.noConflict();
j(function (){
j(".esthela").hover(function(){
j(".esthela").stop(true, false).animate({right:"0"},"medium");
},function(){
j(".esthela").stop(true, false).animate({right:"-400"},"medium");
},500);
return false;
});
//]]>
</script>

<style type="text/css">
/*<![CDATA[*/
.esthela {
float:right;
width:450px;
height:350px;
background: url(http://u.jimdo.com/www21/o/s4e9df44a0ad8ccd8/img/i89f1a63f61ac63da/1340075377/std/image.png) no-repeat !important;
display:block;
right: -400px;
padding:0;
position:fixed;
top: 56px;
z-index:1002;
}
/*]]>*/
</style>


Lo que esta de color rojo es la direcion url de la imagen de fondo, tu la puedes remplazar por la tuya.

Este codigo en un widget/html

<div class="esthela" style="right: -400px;">
    <div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;">
        <div class="disemucho.jimdo.com">
            aqui tu chat o lo que desees
        </div>
    </div>
</div>

 

Les dejo el tamaño de la imagen en la parte de abajo, la puedes modificar con un editor de imagenes, espero les guste y me dejen muchosss comentarios.

Los amigos que ya saben css y html podran hacer unas creaciones y modificaciones a su estilo.

Comentarios: 80
  • #80

    Dave (viernes, 06 diciembre 2019 08:13)

    ESA MIERDA NO SIRVE!!!!!!

  • #79

    alejandro (jueves, 23 marzo 2017 10:25)

    asd

  • #78

    price (viernes, 09 diciembre 2016 23:25)

    Hello!

  • #77

    SEO (martes, 22 noviembre 2016 10:21)

    Al idea es muy buena y funciona, gracias!

  • #76

    discount (martes, 18 octubre 2016 03:15)

    Hello!

  • #75

    without (lunes, 17 octubre 2016 16:17)

    Hello!

  • #74

    Madeline (sábado, 10 septiembre 2016 19:42)

    Hola!
    la idea esta my bien, si me funciona, pero hay un problema...
    hago mi propio y fondo y cuando le quiero poner al codigo el ancho y el largo de mi fondo
    la box se desaparece, y la vdd no me gusta dejarlo asi de grande como esta en tu codigo por que sale mucho hacia en medio de la pagina, es como si la cajita saliese disparada hacia casi el centro y deja mucho espacio de transparencia al rededor por el tamaño que tiene tu codigo, hay alguna forma de arreglar esto, mi caja no la quiero tan grande, solo quiero poner unos links pequeños.

    Gracias!

  • #73

    dgfdh (viernes, 15 julio 2016 10:04)

    dfgsdfgsdfh

  • #72

    marco (viernes, 29 abril 2016 14:12)

    hola

  • #71

    Paul (viernes, 08 enero 2016 08:33)

    Exelente aporte. solo una cosa, cambie el tamaño de la caja y ahora se muestra distorcionado, a que se debe eso.
    Osea la caja sin pasar el puntero se muestra la mitad.

  • #70

    Juan José (martes, 05 enero 2016 17:58)

    ¡Hola! Como puedo agregar una barra de menú adicional a la que viene por defecto. Me gustaria generar un segundo menú desplegable. ¡Saludos!

  • #69

    Emily (jueves, 10 diciembre 2015 13:24)

    He tratado de ponerla en mi página de Jimdo pero no sale nada, que pasa ):

  • #68

    ley (miércoles, 02 diciembre 2015 08:16)

    Hola. Muy buena tu pagina, me a ayudado muchisimo a decorar mi web. Una pregunta, puse el codigo de la caja flotante laterar y en ella puse un chat, me va perfecto pero no se como ponerle el nombre asi como esta en la imagen de arriba (chat en linea).
    Me podrias ayudar? y Gracias otravez por tu pagina, esta super chula.

  • #67

    Willman_GT (viernes, 17 julio 2015 16:20)

    gracias tipo por esta caja desplegable la necesitaba mucho

  • #66

    Esthela Duche (miércoles, 01 julio 2015 18:09)

    Buenas tardes el código funciona Cristian por favor revise su código porque tiene conflictos con los js por favor utilice el jQuery.noConflict
    saludos

  • #65

    Cristian (martes, 30 junio 2015 16:31)

    Deben Saber que al poner este Codigo en el Head Se les Daña El Slider de su pagina(Si Tienen)

  • #64

    willy (viernes, 15 mayo 2015 17:07)

    hola como hago par ponerlo en el pie de pagina y se deslice verticalmente ayuadame

  • #63

    panther (jueves, 23 abril 2015 11:33)

    muchas gracias estela, lo puse en mi pagina y anduvo perfecto.

  • #62

    Javier Abrigo (lunes, 16 marzo 2015 21:02)

    Buenas noches. Me sirvió mucho la info y pudo pegarla en blog... el tema es que no sé como le puedo cambiar el fondo. alguien me ayuda. Muchas Gracias.

  • #61

    william (sábado, 07 marzo 2015 21:12)

    y yo creia que era bueno xD

  • #60

    Jesus (miércoles, 03 diciembre 2014 06:27)

    Muchisimas gracias! está muy bien! ¿hay forma de dejarlo fijo? es decir, que no haya que desplegarlo....

  • #59

    jose (miércoles, 15 octubre 2014 22:14)

    Gracias por la aportacion. Me ha sido de gran ayuda.

  • #58

    fea (sábado, 11 octubre 2014 15:52)

    hermosa

  • #57

    cumbiaactual (martes, 07 octubre 2014 12:45)

    no me funciona en mi navegador firefox ni en explorer

  • #56

    asd (viernes, 05 septiembre 2014 03:57)

    asd

  • #55

    Gustavo (viernes, 15 agosto 2014 17:39)

    Hola, disculpa no funciona en internet explorer, correcto? a mi ahi no me funciona solo en google chrome, porque?

  • #54

    Gustavo (viernes, 15 agosto 2014 11:24)

    Esta super esta pagina quisiera felicitar a la creeadora, yo apensa empiezo en esto

  • #53

    Heber Agustín (miércoles, 23 abril 2014 06:15)

    Oh! ya no gracias ya vi como xD, buen sitio web, me gusta mucho, gracias por los código, son la leche :)

  • #52

    Heber Agustín (miércoles, 23 abril 2014 06:10)

    Hola buen día tengan, quisiera saber como la puedo cambiar a la izquierda? me pueden ayudar por favor?

  • #51

    Francisco Javier Guerrero Hernandez (lunes, 14 abril 2014 10:12)

    hola gracias por apoyar con este gran aporte la verdad no lo he checado pero se ve interesante y hasta la fecha no me han fallado ninguno de los codigos que he descardado de esta web saludos juana y un abrazo...

  • #50

    ryuuanime (martes, 24 diciembre 2013 16:50)

    Tengo una duda, si quiero que el cajón no se abra automáticamente al pasar el cursor, si no que se abra tras darle click ¿Qué tengo que hacer? D:

  • #49

    KaoriNadeshiko (martes, 17 diciembre 2013 17:11)

    Genial!! Funciona perfectamente :D! acomodé todo a mi gusto! fue de mucha ayuda es lo que estaba buscando :3! Gracias por compartirlo :D!

  • #48

    Neomar (martes, 12 noviembre 2013 01:22)

    hola como podria hacerlo pero para wordpress

  • #47

    JC (domingo, 10 noviembre 2013 12:57)

    Como lo puedo Poner en Blogger?

  • #46

    David Ezequiel Monteros Folguera (martes, 15 octubre 2013 19:40)

    hola tengo un problema con un boton anda perfecto pero la primera cada vez que entras a la pagina aparece desplegado un pedazo del boton cuando pasas el mouse por encima y luego quitas el mouse se minimiza normal pero como puedo solucionar el problema que aparece desplegado al cargar la pagina porfa para ver el boton entren aqui http://chatxxi.jimdo.com/

  • #45

    shingekinokyojin (lunes, 14 octubre 2013 23:37)

    esta buena no lo prove pero ya tengo en emnte que poner porfa entra en mi web http://chatxxi.jimdo.com/ y hablame tengo unas cosas que preguntarte porfa cuando entres me veras soy TheGreatWarrior gracias por el aporte

  • #44

    Eltigre (miércoles, 11 septiembre 2013 12:48)

    esta muy lindo el aporte pero si quiero cambiarlo de posicion
    mejor dicho el codigo esta configurado para q salga la caja de comentarios alado derecho y como le ago pa q aparesca al izquierda ?

  • #43

    Tiglecito (martes, 10 septiembre 2013 11:24)

    Hola muchas gracias por tu aporte me sirvio mucho .
    muchas gracias de corazon :)

  • #42

    nafterz06pc (jueves, 05 septiembre 2013 15:24)

    perdon ya vi como cambiar no me fije muy bien xD

  • #41

    nafterz06pc (jueves, 05 septiembre 2013 15:08)

    hola quiero saber para modificar la imagen o como se llame por fa ayudenme
    y pasa por mi pagina

  • #40

    Fanny Ariza (jueves, 22 agosto 2013 07:09)

    buenos dias como le hago para colocarlo del lado izquiero

    gracias saludos

  • #39

    Sergio Danilo Cabero Ureña (lunes, 12 agosto 2013 11:21)

    wow, super gracias y que modificación debo hacer para que no salga como caja flotante si no como un cuadro fijo?

  • #38

    JOSE (martes, 18 junio 2013 17:19)

    necesito poner 2 barras laterales flotantes, ya puse una con el clima (left) y ahora necesito poner otra con banner's (right)..., es urgente..., COMO HAGO???, dado que al colocar 2 veces todo el código y modificar "left - right" y parámetros de px SE SUPERMONEN...

  • #37

    notifame (viernes, 19 abril 2013 14:21)

    oigan como ago para poner un chat ahy

  • #36

    Taylor Asprilla (viernes, 19 abril 2013 02:59)

    Genial, Excelente Efecto

  • #35

    SARAHI RAMIREZ (sábado, 16 febrero 2013 06:46)

    oye sinceramente adoro tú página. gracias por todo lo que compartes, por tomarte el tiempo de hacer los códigos, subirlos y aparte de todo eso de resolver dudas! Gracias!

  • #34

    Esthela Duche (martes, 05 febrero 2013 12:34)

    Hola Alejandro, si tu agregastes el chat y no puedes escribir debe ser porque están dos jquery-1-4-2 no le pongas el código del jquery e intentar ver si te funciona.
    Gracias por visitar nuestra web bienvenido.

  • #33

    Alejandro Menendez (lunes, 04 febrero 2013 21:19)

    hola oye no puedo escribir en el chat.... como le puedo hacer ?

  • #32

    EL RINCON DEL PULPO (miércoles, 23 enero 2013 07:53)

    Me valió de mucha ayuda, muchas gracias.
    Os invito a dar una vuelta por aquí:
    TV, PELICULAS ONLINE, SERIES, CLAVES NOD32, DESCARGAS... todo lo que te gusta a un click, no te lo pierdas.
    Entra a El Rincón del Pulpo:

    Http://juanpedromayoral.jimdo.com

  • #31

    musicaahd (domingo, 02 diciembre 2012 15:45)

    Ey me sirio muchas Gracias
    ojala pasen por mi web