lun

18

jun

2012

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: 59

  • loading
  • #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

  • JimdoPro
    #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!

  • JimdoPro
    #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

  • #30

    zqkvibraciones (lunes, 12 noviembre 2012 19:29)

    Lo habia visto antes pero aquí está mejor como lo explican, muchas gracias

  • #29

    cristian (martes, 06 noviembre 2012 08:55)

    Hola necesito saber como colocar Esta CAja En posicion isquierda, ya que al cambiarlo a left en el style no abre para alado Porfavor ayuda

  • #28

    Felix (domingo, 02 septiembre 2012 13:14)

    hola amigo y dime el archivo jquery-1-4-2-min.js?

  • #27

    canalestvgratis (viernes, 24 agosto 2012 04:22)

    o perdon esque loa bia colocaod mal si funciona muchas gracias

  • #26

    canalestvgratis (viernes, 24 agosto 2012 03:56)

    hola esterla fijate que yo lo coloque en mi pagina jimdo y no me funciono y lo proble en mi blog en mi blog si anda y aqui en la de jindo no no se que pasa

  • #25

    djxpirt (domingo, 29 julio 2012 21:54)

    como cambio el nombre enbez de poner chat en linea quiero poner otra cosa

  • #24

    despertarymediumnidad (jueves, 26 julio 2012 12:05)

    Como elimino esta caja flotante.

  • #23

    micrapple (miércoles, 25 julio 2012 19:11)

    Gracias buen aporte le servira a mi web

  • #22

    exion-anime (miércoles, 18 julio 2012 15:13)

    hola una pregunta y si quisiera poner dos ventanas flotantes como le hago una para el chat y otra para el reproductor........ espero me puedan ayudar n_n grax

  • #21

    Trash (domingo, 15 julio 2012 15:16)

    Buenisimo aporte Hay forma de meter uno de estos chats para movil?

  • #20

    entretenimiento-ocio-ymas (miércoles, 11 julio 2012 23:18)

    TRATE DE PONER LA CAJA FLOTANTE PARA PONER MI CHAT Y NO SALIO NADA.
    . EL 1ER CODIGO LO PUSE EN AJUSTES-DITAR HEAD Y LO PEGUE AHI Y LE CAMBIEN LA IMAGEN DE FONDO.
    DESPUES EL 2DO ODIGO O PUSE EN UN WIDGET/HTML LO GURDE Y ME SALIO EL CHAT EN EL CENTRO DE LA PAGINA.
    PODRIAS DECIRME QUE ESTA MAL ?

    GRACIAS ESPERO TU RESPUESTA ,,ESTARE PENDIENTE.

  • #19

    entretenimiento-ocio-ymas (miércoles, 11 julio 2012 21:18)

    hola .

    soy nueva haciendo paginas,estoy haciedo una pagina jimgo. quisiera poner una caja flotante para poner mi chat ,,pero no entiendo mucho la platilla de jimdo ,,podrias decirme los pasos para poner el codigo de dicha caja. es decir a donde dirigirme 1ro para colocarlo.
    de ante mano gracias y muy buena ,interesante, instructiva tu pagina-

  • #18

    escuchomusica (sábado, 07 julio 2012 19:27)

    gracias por la aportacionme suscribire a a su pagina esta bien chida muchas gracias

  • #17

    makaco (sábado, 30 junio 2012)

    men no se como poner eso de un widget no entendi si me lo explicaras estaria agradesido

  • #16

    top-eleven (viernes, 29 junio 2012 20:01)

    hola esthela tengo una pregunta como puedo hacer para poner varios codigos en el head?? espero tu respuesta gracias

  • #15

    rexbull (jueves, 28 junio 2012 19:50)

    otra cosa podrias hacer la caja mas pequeña porfavor para que se salga 1 poquito como en esta web a mi me que da muy grande

  • #14

    rexbull (jueves, 28 junio 2012 19:47)

    hola esthela me gustaria si publicaras una plantilla parecida a la tuya que con imagenes en movimiento como encabesado y que al final salgan cosas que hallan en la pagina lo podrias hacer porfavor? si me respondes porfavor en mi pagina rexbull.jimdo.com

  • #13

    wordpress (jueves, 28 junio 2012 16:01)

    polished theme.elegants themes

  • #12

    Fomi3D (jueves, 28 junio 2012 14:51)

    Funciona perfecto MIL GRACIAS

  • #11

    rexbull (miércoles, 27 junio 2012 20:44)

    olle no se puede modificar

  • #10

    laselenaticas (miércoles, 27 junio 2012 06:30)

    gracias Esthela Duche