CUADROS o CAJAS FLOTANTES PARA TU WEB

Cajas o cuadros de texto FLOTANTES DE COLOR

NOTA:

1 DONDE DICE (en el codigo) WIDTH: 398px ES EL ANCHO DE LA CAJA, SOLO CAMBIA LOS NUMEROS.

 

2 DONDE DICE (enel codigo): HEIGHT: 184px ES LA ALTURA DEL CUADRO, SOLO CAMBIA LOS NUMEROS.

 

3 DONDE DICE (en el codigo): BACKGROUND-COLOR: #BE81F7 INDICA EL COLOR QUE QUIERES QUE TENGA TU CUADRO, COMO LOS DOS EJEMPLOS DE ABAJO, SOLO CAMBIA LO QUE ESTÁ EN NEGRITA AZUL OSCURO.

 

4 PARA CAMBIA EL COLOR DE LA LETRA DEL TEXTO BUSCA DONDE DICE:color=#000033

<P align=center><FONT color=#000033>aqui colocas el codigo o texto</FONT></P></DIV></DIV>

 y listo 

Para colocar esta cajas en jimdo las debes colocar asi como las imagenes:

1. Insertas un nuevo elemento de texto asi:


 

CAJAS PARA TEXTO O CODIGOS EN JIMDO

asi como ves en la imagen te sale y ahi debes colocar el codigo html y das clic en actualizar

 asi te quedara ahi dentro colocas el codigo o texto que desees mostrar

<div style="width: 195px; height: 208px; background-image: url(https://u.jimcdn.com/www21/o/s4e9df44a0ad8ccd8/img/i2207ee480401c589/1302669709/std/image.gif);">
<div style="width: 193px; height: 67px;"> </div>
<div style="width: 193px; height: 127px; overflow: auto; scrollbar-face-color: #bfe3fd; scrollbar-highlight-color: #bfe3fd; scrollbar-3dlight-color: #bfe3fd; scrollbar-shadow-color: #bfe3fd; scrollbar-darkshadow-color: #bfe3fd; scrollbar-track-color: #e1f2fe; scrollbar-arrow-color: #FFFFFF;"> <span style="font-family: verdana; font-size: 90%; color: #fa8072;">aqui tu texto</span></div>
<a href="http://disemucho.jimdo.com" target="_blank"><img src="https://u.jimcdn.com/www21/o/s4e9df44a0ad8ccd8/img/ibfaa9fa02cd3abaf/1302669824/std/image.gif" border="0" alt="" /></a></div>
<!-- www.disemucho.jimdo.com -->

 

aqui tu texto codigo o texto

 

Si te gusta estas cajas de texto solo copia el codigo que esta dentro

<DIV style="BORDER-RIGHT: #000000 3px dashed; BORDER-TOP: #000000 3px dashed; SCROLLBAR-FACE-COLOR: #cc00cc; SCROLLBAR-HIGHLIGHT-COLOR: #cce9fd; OVERFLOW: scroll; BORDER-LEFT: #000000 3px dashed; WIDTH: 398px; SCROLLBAR-SHADOW-COLOR: #ffbbf1; COLOR: #ff88e7; SCROLLBAR-3DLIGHT-COLOR: #ddaaff; SCROLLBAR-ARROW-COLOR: #b444ff; BORDER-BOTTOM: #000000 3px dashed; SCROLLBAR-DARKSHADOW-COLOR: #3e8f7e; HEIGHT: 184px; BACKGROUND-COLOR: #F5A9D0" align=center><P align=center><FONT color=#000033></FONT>&nbsp;</P><P align=center><FONT color=#000033>aqui colocas tu texto codigo</FONT></P></DIV></DIV><DIV align=center>&nbsp;</DIV> 

 

 

<DIV style="BORDER-RIGHT: #000000 3px dashed; BORDER-TOP: #000000 3px dashed; SCROLLBAR-FACE-COLOR: #cc00cc; SCROLLBAR-HIGHLIGHT-COLOR: #cce9fd; OVERFLOW: scroll; BORDER-LEFT: #000000 3px dashed; WIDTH: 398px; SCROLLBAR-SHADOW-COLOR: #ffbbf1; COLOR: #ff88e7; SCROLLBAR-3DLIGHT-COLOR: #ddaaff; SCROLLBAR-ARROW-COLOR: #b444ff; BORDER-BOTTOM: #000000 3px dashed; SCROLLBAR-DARKSHADOW-COLOR: #3e8f7e; HEIGHT: 184px; BACKGROUND-COLOR: #BE81F7" align=center><P align=center><FONT color=#000033></FONT>&nbsp;</P><P align=center><FONT color=#000033>AQUI TU TEXTO O CODIGO</FONT></P></DIV></DIV><DIV align=center>&nbsp;</DIV>

 

 

 

 

</STRONG>
<P></P>
<P align=center><STRONG><FONT color=#6699ff></FONT></STRONG></P>
<P align=center><STRONG><FONT color=#ff00ff></P></FONT></STRONG>
<DIV style="BORDER-RIGHT: #33cc00 3px dotted; BORDER-TOP: #33cc00 3px dotted; SCROLLBAR-FACE-COLOR: #000000; SCROLLBAR-HIGHLIGHT-COLOR: #0099ff; OVERFLOW: auto; BORDER-LEFT: #33cc00 3px dotted; WIDTH: 163px; SCROLLBAR-SHADOW-COLOR: #33cc00; SCROLLBAR-3DLIGHT-COLOR: #33cc00; SCROLLBAR-ARROW-COLOR: #33cc00; BORDER-BOTTOM: #33cc00 3px dotted; SCROLLBAR-DARKSHADOW-COLOR: #0099ff; SCROLLBAR-BASE-COLOR: #000099; HEIGHT: 117px">
<P>aqui pon tu texto</DIV>
<P>&nbsp;</P>

 

 

 

 

<p>&nbsp;</p><p><strong><span style="color: #6699ff;">&nbsp;</span></strong></p><p><strong><span style="color: #ff00ff;">&nbsp;</span></strong></p><div style="scrollbar-face-color: #000000; scrollbar-highlight-color: #FF66FF; overflow: auto; width: 163px; scrollbar-shadow-color: #33cc00; scrollbar-3dlight-color: #33cc00; scrollbar-arrow-color: #33cc00; scrollbar-darkshadow-color: #0099ff; scrollbar-base-color: #000099; height: 117px; border: #FF66FF 3px dotted;"><p>aqui su texto</p></div>

<DIV align="center"><div style="width:300pt; height:150pt;background-color: #000000;color: #FF0000;border-style: double;border-color: #00FF00;overflow: scroll;scrollbar-face-color: #000000;scrollbar-highlight-color: #FF0000;scrollbar-shadow-color: #FF0000;scrollbar-3dlight-color: #FF0000;scrollbar-arrow-color: #FF0000;scrollbar-darkshadow-color: #FF0000;border-bottom: 4px double #00FF00"<p align="center">Aquí va el texto ó el código HTML</P></DIV></DIV>

<table border="0" cellspacing="0" cellpadding="0" align="center"><tbody><tr><td>                <img style="width: 443px; height: 22px;" src="https://u.jimcdn.com/www21/o/s4e9df44a0ad8ccd8/img/i00cf43003627baa4/1300295296/std/image.gif" alt="" width="100" height="22" />            </td></tr><tr><td><div style="scrollbar-face-color: #ffffff; scrollbar-highlight-color: #ffffff; overflow: scroll; width: 442px; scrollbar-shadow-color: #ffffff; scrollbar-3dlight-color: #ffffff; scrollbar-arrow-color: #000000; scrollbar-darkshadow-color: #ffffff; height: 87px; background-color: #ffffff; border: white 2px solid;"><p>                        <span style="color: #000000; font-size: 12px;">AQUI EL TEXTO</span>                    </p><p>&nbsp;</p></div><img style="width: 442px; height: 9px;" src="https://u.jimcdn.com/www21/o/s4e9df44a0ad8ccd8/img/if3487608fdb9a3b7/1300295401/std/image.gif" alt="" width="100" height="14" />            </td></tr></tbody></table>

 

<table border="0" cellspacing="0" cellpadding="0" align="center"><tbody><tr><td>                <img style="width: 443px; height: 22px;" src="https://u.jimcdn.com/www21/o/s4e9df44a0ad8ccd8/img/i5b132d2f7aca955e/1300295923/std/image.gif" alt="" width="100" height="22" />            </td></tr><tr><td><div style="scrollbar-face-color: #ffffff; scrollbar-highlight-color: #ffffff; overflow: scroll; width: 442px; scrollbar-shadow-color: #ffffff; scrollbar-3dlight-color: #ffffff; scrollbar-arrow-color: #000000; scrollbar-darkshadow-color: #ffffff; height: 87px; background-color: #ffffff; border: white 2px solid;"><p>                        <span style="color: #000000; font-size: 12px;">AQUI EL TEXTO</span>                    </p><p>&nbsp;</p></div><img style="width: 442px; height: 9px;" src="https://u.jimcdn.com/www21/o/s4e9df44a0ad8ccd8/img/i36715b83f456ffb1/1300295956/std/image.gif" alt="" width="100" height="14" />            </td></tr></tbody></table>

<div><div style="border-right: #cc9900 6px ridge; border-top: #cc9900 6px ridge; font-size: 9pt; z-index: 1; left: 10px; overflow: visible; border-left: #cc9900 6px outset; width: 500px; line-height: 10pt; border-bottom: #cc9900 6px inset; top: 296px; height: 500px; background-color: #336600;"><p>aqui coloca tu texto</p></div></div><div><div style="border-right: #cc9900 6px ridge; border-top: #cc9900 0px ridge; z-index: 1; left: 9px; border-left: #cc9900 6px outset; width: 500px; border-bottom: #cc9900 6px ridge; top: 500px; height: 25px; background-color: #996633;"><p><span style="font-family: 細明體;"><span style="color: #99ccff; font-family: 細明體;"><strong>Copia y pega este codigo </strong></span><span style="color: #663300; font-family: 標楷體;">██ html&nbsp;</span></span></p></div></div>

Copia y pega este codigo ██ html 

Si entiendes de html te dejo estas instrucciones que te ayudaran a modificarlas a tu estilo

 

-( Back Ground-color ): color de fondo del recuadro

- Color: color de texto

-( Border-Stule ): estilo del borde (none | dotted | dashed | solid | double | groove | ridge | inset | outset)

 

-( Border-Color ): color del borde

-( Overflow ): tipo de Text box: visible { overflow: visible; } hidden { overflow: hidden; }scroll { overflow: scroll; } auto { overflow: auto}

 

-( Scrollbar-face-color ): color de la cara de la barra de desplazamiento

-( Scrollbar-highlight-color ): brillo de la barra de desplazamiento

-( Scrollbar-shadow-color ): color de la sombra de la barra de desplazamiento

 

-( Scrollbar-3dlight-color ): color del efecto 3D de la barra de desplazamiento

-( Scrollbar-arrow-color ): color de la flecha de la barra de desplazamiento

 

-( Scrollbar-darkshadow-color ): la parte oscura de la sombra de la barra de desplazamiento

-( Border-bottom ): estilo (none | dotted | dashed | solid | double | groove | ridge | inset | outset) y color del borde inferior

 

aqui abajo te dejo las imagnes puedes guardarlas en tu pc y modifirle los colores

Comentarios: 65
  • #65

    derechoaviviryseramado (viernes, 28 noviembre 2014 07:50)

    Que bien lo que nos aportas! mil gracias

  • #64

    wender123 (miércoles, 29 octubre 2014 15:37)

    buenas las cajas esas pasence por mi web wender123.jimdo.com

  • #63

    Claudia Rengifo (martes, 16 septiembre 2014 14:39)

    ¡Genial! Justo lo que necesitaba

  • #62

    GloriaV (miércoles, 13 agosto 2014 03:36)

    Amados y estimados

    Aquí tenéis un magnifico tutorial- http://brindisreflexionestutorial.jimdo.com/tutorial-codigos/

    Texto con fondo
    1. http://brindisreflexionestutorial.jimdo.com/tutorial-codigos/texto-con-fondo/1/
    2. Esquemas originales (jamás visto, son únicos).
    http://brindisreflexionestutorial.jimdo.com/tutorial-codigos/texto-con-fondo/con-esquinas-originales/
    3. Ventanas para texto, código o imagen (primero se instala como texto con HTML, justo como enseña esta página y segundo directamente como texto pegar código)
    http://brindisreflexionestutorial.jimdo.com/tutorial-codigos/ventana-para-codigo/
    ..............
    Otros web con brindis, reflexiones y flash (con códigos para instalar)
    1. http://compraventabrindisytododo.jimdo.com/imagenes-flash/
    2. http://fondogifimagengloriav.jimdo.com/imagenes-flash/

    Ofrezco mucho más que se puede imaginar.

    Con amor
    GloriaV

  • #61

    breimercorreamusic (jueves, 29 mayo 2014 16:20)

    XD

  • #60

    superhackerflope (jueves, 08 mayo 2014 21:57)

    no pude poner un codigo

  • #59

    tutorialesfanaticoscityagain (martes, 18 febrero 2014 10:27)

    mi nombre es largo :P

  • #58

    djituby (jueves, 09 enero 2014 14:17)

    buenos cuadros de textos

  • #57

    akiko (jueves, 14 noviembre 2013 18:19)

    gracias espero me funcione, me llevo unas cuantas :)

  • #56

    Soledad (miércoles, 06 noviembre 2013 12:24)

    hola me gusto esto pero ise los pasos exactamente como lo dices y le pongo el código de mi banner y no sale el código sale la imagen dentro d la caja jajaja ni idea d como es me gustaría q me explicaran mejor x favor gracias d ante mano.

  • #55

    holis (lunes, 30 septiembre 2013 15:49)

    muchisisisimas gracias

  • #54

    elbakeo59 (sábado, 28 septiembre 2013 15:29)

    ta nitido
    grasias

  • #53

    JuD (lunes, 02 septiembre 2013 17:30)

    Muy buen post gracias...

  • #52

    Kevin (lunes, 12 agosto 2013 13:10)

    Hola como estan

  • #51

    mundotkm (sábado, 13 julio 2013 14:30)

    Muy bueno!!! =D

  • #50

    androidex1 (domingo, 02 junio 2013 11:44)

    perfectas me llevo 1 :3

  • #49

    dfgbvsdf (jueves, 23 mayo 2013 21:18)

    erth4rthrgbfwrgbrtyn

  • #48

    newtubexxx (viernes, 03 mayo 2013 15:36)

    hola gracias por la plantilla de youtube miren mi web newtubexxx.jimdo.com

  • #47

    Tony (miércoles, 10 abril 2013 03:30)

    Muy Buenos, sobre todo los que tiene dibujos, muy currados, saludos.

  • #46

    codigosdulcegominola (martes, 22 enero 2013 13:12)

    Pos yo copie pa mki web de códigos

  • #45

    megaclickgratis (miércoles, 09 enero 2013 06:33)

    Excelente WEB!Notable trabajo!!!

  • #44

    republica-del-peru (sábado, 15 diciembre 2012 16:22)

    TA CHEVERE

  • #43

    asdasdsa (domingo, 09 diciembre 2012 18:32)

    adsfasdasdasdsadasd

  • #42

    losdelprimeroa (sábado, 08 diciembre 2012 12:08)

    Hola Quiero Colocar Musica En mi Web Me Ayudan ?

  • #41

    Anónimo (sábado, 01 diciembre 2012 09:51)

    Mi blog es mejor. Entra a xurl.es/6r

  • #40

    ana garcia (martes, 27 noviembre 2012 15:58)

    holaaa saludos para todos ... yo keria saber si hay alguna manera en las paginas jimdo pro ..
    de poder instalas una fuente de letra para q los textos de mi pagina poderlos hacer con el estilo de letra q yo kiera . grax un saludo a ve si alguien me puede ayudar ;-)

  • #39

    solomodaparachicas (jueves, 01 noviembre 2012 19:25)

    no entiendo como poder el texto

  • #38

    clubpenguinxtreme1 (jueves, 01 noviembre 2012 16:22)

    MUY BN ME ENCANTA ESTE BLOG PORFISSS BUCA PLANTILLAS Y COSAS DE CLUB PENGUIN TE LO PIDO ES PARA MI BLOG PORFISS GRACIAZZZZ

  • #37

    Cyrusfire (ServerCstrike) (domingo, 28 octubre 2012 15:27)

    Buen aporte :)

  • #36

    felymanche (viernes, 19 octubre 2012 17:59)

    me parece muy interesante esta informacion y que la compartais! muchas gracias, yo la voy a compartir también a través de mi página felymanche.jimdo.com

  • #35

    elquesabe2015 (martes, 16 octubre 2012 12:06)

    amigos tengo un problem, puse un codigo html que es de unos perritos con alas a las puntas de ariba de mi web pero haora no lo puero sacar ayuda

  • #34

    hangelnarutoarts (lunes, 15 octubre 2012 15:01)

    muy bonitas

  • #33

    celibriich (lunes, 24 septiembre 2012 12:24)

    NOS PODRIAS DAR UN CODIGO PARA EL RELOJ DE ARENA

  • #32

    Aleska (domingo, 29 julio 2012 13:08)

    como rayos puedo escribir adentro de cuadrito ayudaa soy una novataa

  • #31

    djdarkexflow (viernes, 13 julio 2012 00:49)

    <BGSOUND SRC="sonido.mid" LOOP=none>
    <WIDTH=200 HEIGHT=55 AUTOSTART="true" LOOP="false" HIDDEN="true">

  • #30

    rexbull (viernes, 29 junio 2012 13:53)

    si saludos desde colombia

  • #29

    sully alexandra (jueves, 17 mayo 2012 15:43)

    hay muchas gracias me sirvió un resto...... saludes desde colombia ^^

  • #28

    paginas web (martes, 08 mayo 2012 20:36)

    excelente pagina web...te felicito un saludo desde chile

  • #27

    Siverlong (lunes, 09 abril 2012 10:30)

    Aprovecha la oportunidad!!!!!!
    Solo queda un mes para que el concurso siverlong de la mejor pagina jimdo termine y empiezen las votaciones, si aun no estas incluido en el concurso, ¿a que estas esperando?
    CONCURSA YA TOTALMENTE GRATIS tan solo pon los pocos datos que te piden en nuestra web y ala a concursar, y si ya estas dentro del concurso, queda poco para las votaciones, empieza a preparar a ua amigos para que te voten.


    CONCURSO MEJOR PAGINA JIMDO

    De : siverlongAprovecha la oportunidad!!!!!!

  • #26

    patostudio (miércoles, 04 abril 2012 15:26)

    muy bueno


    quisiera q me ayudes
    quiero subir un formulario q hice en netsbeans
    ayudame

  • #25

    Juan Carlos Suarez (sábado, 24 marzo 2012 14:33)

    Necsitaria que me dieran una mano quiero agregarle a mi pagina un cuadro con noticias que se actulisen solas como suelen tener los portales de periodicos, si me pueden escribir a mi correo a decirme gracias: juancsuarez1@yahoo.com.ar

  • #24

    avarogames (jueves, 22 marzo 2012 13:11)

    buena web.
    Soys o quereis desarrollar aplicaciones Android?
    pasaros por http://avarogames.com

    Plataforma AppInventor
    Interesa a webmasters, empresas y particulares

  • #23

    JJ-21 (jueves, 22 marzo 2012 13:05)

    JJ-21 tu web de ocio: http://JJ-21.jimdo.com

  • #22

    estudioimaginario (miércoles, 21 marzo 2012 11:37)

    etsa buena

  • #21

    contabilidadpublica (domingo, 18 marzo 2012 22:25)

    buenisiiiiiiiiiiimaaaaaaaa!

  • #20

    eldesastredemaria.blogspot.com (domingo, 18 marzo 2012 08:53)

    me ha encantado la pagina, lo de los cuadros donde poner texto lo llevaba buscando hace tiempo y estos me encantan!!

  • #19

    todoboombang-chanito21 (miércoles, 14 marzo 2012 11:36)

    STA PAG SI ESTA BUENA

  • #18

    Twist (sábado, 10 marzo 2012 19:24)

    Buenas noches Estela, quiero saber si me podrías ayudar a colocar una base de datos en la pagina que creare, es para que cuando los usuarios ingresen a mi pagina, puedan registrarse y crearse un usuario en ella., quisiera saber si podrías ayudarme, de antemano; Gracias.

  • #17

    elrincondejackie (viernes, 02 marzo 2012 04:00)

    Hola Estela he intentado poner una de estas cajitas con mis codigos dentro y no puedo,solo me sale las cajitas pero ningun còdigo,no entiendo cuàl es el error q cometo,ayudame porfavor!!! tengo una pàgina dedicada a los gifs y estas cajitas con còdigos me serian muy ùtiles,gracias por tu ayuda!!!

  • #16

    calatayudaragon (sábado, 25 febrero 2012 19:11)

    hola