Instrucciones

CÓDIGOS PARA INSERTAR EN TUS BLOGS

Todo el contenido que aparece a continuación está formado por una serie de códigos para personalizar los espacios msn. Para utilizarlos, no tenéis más que agregar una nueva entrada, pinxar en el botón de HTML, pegar el código correspondiente y realizar los cambios precisos para agregar vuestro texto.

Pinxa a continuación en el contenido que te interese:

  1. Publicar imágenes.
  2. Fondo a color.
  3. Fondo con imagen.
  4. Fondo a color con barra desplazadora a la derexa y abajo.
  5. Fondo con imagen y barra desplazadora a la derexa y abajo.
  6. Fondo a color con barra desplazadora a la derexa.
  7. Fondo con imagen y barra desplazadora a la derexa.
  8. Texto con borde de color (I)
  9. Texto con borde de color (II)
  10. Cuadro con Scrollbar
  11. Vínculo a una web desde una imagen
  12. Texto con sombra (I)
  13. Texto con ondulación
  14. Texto con sombra (II)
  15. TABLAS (I)
  16. TABLAS (II)

 

1. PUBLICAR IMÁGENES

Para poner una imagen solo tienes q agregar una nueva entrada, pinxar en el botón de HTML y pon el siguiente código donde tendrás que sustituir las XXXX por la URL de la imagen.

<DIV><IMG src="XXXX"></DIV>

POR EJEMPLO:

<DIV><IMG src="http://perso.wanadoo.es/anacarogarcia/Gif%20Animados/Animales/abeja4.gif"></DIV>

Para conocer la URL de las imágenes pues cnd las veas en algun sitio web (desde tu ordenador no sirven) pinxas encima d ella con el boton drxo dl ratón y dale a propiedades. Se te abrirá una nueva ventana y tienes q copiar la dirección que hay al lado de donde pone "Dirección WEB URL" y listo.

Cuando hayas terminado pinxas otra vez en html y verás el resultado.

Aquí puedes ver como quedaría con la imagen del ejemplo:

 

2. FONDO A COLOR

<DIV>
<P><FONT face="Comic Sans MS" color=#000000 size=4></FONT>&nbsp;</P>
<DIV style="WIDTH: 100%; HEIGHT: 10%; BACKGROUND-COLOR: #ff0000">
<P align=center><FONT face="comic sans ms" color=#ffcc99 size=5>TU TEXTO AQUI</FONT></P>
<P align=center>&nbsp;</P></DIV>
<DIV></DIV>
<DIV></DIV>
<P><FONT face="comic sans ms" size=5></FONT>
<DIV></DIV>
<DIV></DIV><FONT face="comic sans ms" color=#0000ff size=5></FONT>&nbsp; </DIV>

En este código q hay escrito, el color de fondo que aparece es el rojo ( #ff0000). Para poner el color que querais, solo teneis que cambiar ese código. Los códigos de colores (almohadilla seguida de 6 cifras) los teneís en la siguiente web:

http://www.colorschemer.com/online.html

Aquí puedes ver una imagen con el resultado que quedaría:

 

3. FONDO CON IMAGEN

<P><FONT face="Comic Sans MS" color=#000000 size=4></FONT>&nbsp;</P>
<DIV align=center>
<DIV style="WIDTH: 558px"><IMG style="WIDTH: 542px; HEIGHT: 192px" height=554 src="URL DE LA IMAGEN DE FONDO" width=558 align=right>
<DIV style="FLOAT: left; VERTICAL-ALIGN: middle; WIDTH: 558px">
<P><FONT face="comic sans ms" color=#ff00ff size=5>TU TEXTO AQUI</FONT></P>
<P>&nbsp;</P></DIV></DIV></DIV>
<DIV align=center>&nbsp;</DIV>

Cuando la imagen que useís para el fondo sea demasiado pequeña, se repetirá tantas veces hasta completar todo el fondo de vuestro blog.

Para conocer la URL de las imágenes pues cnd las veas en algun sitio web (desde tu ordenador no sirven) pinxas encima d ella con el boton drxo dl ratón y dale a propiedades. Se te abrirá una nueva ventana y tienes q copiar la dirección que hay al lado de donde pone "Dirección WEB URL" y listo.

Aquí puedes ver una imagen con el resultado que quedaría:

 

4. FONDO A COLOR CON BARRA DESPLAZADORA A LA DERECHA Y ABAJO

<DIV style="BORDER-RIGHT: rgb(208,208,208) 2px outset; BORDER-TOP: rgb(208,208,208) 2px ridge; OVERFLOW: scroll; BORDER-LEFT: rgb(208,208,208) 2px ridge; WIDTH: 100%; COLOR: rgb(0,0,0); BORDER-BOTTOM: rgb(208,208,208) 2px outset; HEIGHT: 179px; BACKGROUND-COLOR: #ff0000" align=left>
<P align=center><FONT face="comic sans ms" color=#ffcc00><STRONG><FONT size=3>&nbsp;</FONT><FONT color=#000000 size=5> TU TEXTO AQUI</FONT></STRONG></FONT></P></DIV>
<P>&nbsp;</P>

En este código q hay escrito, el color de fondo que aparece es el rojo ( #ff0000). Para poner el color que querais, solo teneis que cambiar ese código. Los códigos de colores (almohadilla seguida de 6 cifras) los teneís en la siguiente web:

http://www.colorschemer.com/online.html

Aquí puedes ver una imagen con el resultado que quedaría:

 

5. FONDO CON IMAGEN CON BARRA DESPLAZADORA A LA DERECHA Y ABAJO

<DIV style="BORDER-RIGHT: rgb(208,208,208) 2px outset; BORDER-TOP: rgb(208,208,208) 2px ridge; OVERFLOW: scroll; BORDER-LEFT: rgb(208,208,208) 2px ridge; WIDTH: 536px; COLOR: rgb(0,0,0); BORDER-BOTTOM: rgb(208,208,208) 2px outset; HEIGHT: 196px" align=left><IMG style="WIDTH: 100.57%; HEIGHT: 229.82%" height="100%" src="URL DE LA IMAGEN DE FONDO " width="100%" align=right>
<DIV style="FLOAT: left; WIDTH: 100%; HEIGHT: 366px">
<P align=center><FONT face="comic sans ms" color=#ffcc00><FONT size=3><STRONG></STRONG></FONT></FONT></P>
<P align=center><SPAN lang=EN-GB style="FONT-SIZE: 12pt; FONT-FAMILY: 'Times New Roman'"></SPAN></P>
<P align=center><FONT face="Comic Sans MS" size=4></FONT></P>
<P align=center><FONT face="Comic Sans MS" size=4></FONT>&nbsp;</P>
<P><FONT face="Comic Sans MS" size=4><FONT color=#ffffff>&nbsp;&nbsp; </FONT></FONT></P>
<P align=center><FONT face="Comic Sans MS" color=#ffffff size=4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <FONT color=#000080>TU TEXTO AQUI</FONT></FONT></P></DIV></DIV>
<P><FONT face="comic sans ms" color=#ffcc00><FONT size=3><STRONG>&nbsp;</STRONG></FONT></FONT></P>

Cuando la imagen que useís para el fondo sea demasiado pequeña, se repetirá tantas veces hasta completar todo el fondo de vuestro blog.

Para conocer la URL de las imágenes pues cnd las veas en algun sitio web (desde tu ordenador no sirven) pinxas encima d ella con el boton drxo dl ratón y dale a propiedades. Se te abrirá una nueva ventana y tienes q copiar la dirección que hay al lado de donde pone "Dirección WEB URL" y listo.

Aquí puedes ver una imagen con el resultado que quedaría:

 

6. FONDO A COLOR CON BARRA DESPLAZADORA A LA DERECHA.

<P><SPAN lang=EN-GB style="FONT-SIZE: 8pt"><FONT color=#000000><FONT face="Times New Roman"><FONT size=3></FONT></FONT></FONT></SPAN></P>
<P><SPAN lang=EN-GB style="FONT-SIZE: 8pt; FONT-FAMILY: 'Times New Roman'"><FONT color=#000000 size=3></FONT></SPAN></P>
<DIV>
<TABLE cellSpacing=0 width="100%" border=0>
<TBODY>
<TR>
<TD><SPAN></SPAN></TD></TR>
<TR>
<TD></TD></TR>
<TR>
<TD>
<P>&nbsp;</P>
<TABLE style="WIDTH: 100%; HEIGHT: 137.82%; BACKGROUND-COLOR: #ff0000">
<DIV></DIV>
<TBODY>
<TR>
<TD>
<P align=center><FONT face="comic sans ms" color=#ffcc00 size=5><FONT color=#000000>TÍTULO</FONT></FONT></P>
<P align=center><FONT face="comic sans ms" color=#ffcc00 size=5><IMG style="WIDTH: 48px; HEIGHT: 45px" height=228 src="URL DE ALGUNA IMAGEN QUE QUERÁIS PONER" width=160></STRONG></FONT>&nbsp;</P>
<P align=right>&nbsp;</P>
<P align=right>&nbsp;</P></TD></TR>
<TR>
<TD>
<DIV align=left>
<DIV style="OVERFLOW: auto; WIDTH: 502px; HEIGHT: 165px">
<P align=center><FONT face="comic sans ms" color=#000000 size=5></FONT>&nbsp;</P>
<P align=center><FONT face="comic sans ms" color=#000000 size=5>EL TEXTO AQUI</FONT></P><FONT size=2><FONT color=#ff99cc>
<P align=center><FONT face="comic sans ms" color=#000000 size=5>EL TEXTO AQUI</FONT></P>
<P align=center><FONT face="comic sans ms" color=#000000 size=5>EL TEXTO AQUI</FONT></P>
<P align=center><FONT face="comic sans ms" color=#000000 size=5>EL TEXTO AQUI</FONT></P>
<P align=center><FONT face="comic sans ms" color=#000000 size=5>EL TEXTO AQUI</FONT></P>
<P align=center><FONT face="comic sans ms" color=#000000 size=5>EL TEXTO AQUI</FONT></P></DIV></FONT></FONT></DIV>
<DIV align=left><FONT size=2><FONT color=#ff99cc></FONT></FONT>&nbsp;</DIV>
<DIV align=left><FONT size=2><FONT color=#ff99cc></FONT></FONT>&nbsp;</DIV>
<DIV align=left><FONT size=2><FONT color=#ff99cc>&nbsp;</DIV></FONT></FONT></TD></TR></TBODY></TABLE></TD></TR>

</TBODY></TABLE></DIV>

En este código q hay escrito, el color de fondo que aparece es el rojo ( #ff0000). Para poner el color que querais, solo teneis que cambiar ese código. Los códigos de colores (almohadilla seguida de 6 cifras) los teneís en la siguiente web:

http://www.colorschemer.com/online.html

Aquí puedes ver una imagen con el resultado que quedaría:

 

7. FONDO CON IMAGEN Y BARRA DESPLAZADORA A LA DERECHA

<TABLE style="WIDTH: 530px; HEIGHT: 335px" background=URL DE LAIMAGEN DE FONDO border=0>
<TBODY>
<TR>
<TD>
<P align=center><FONT face="comic sans ms" color=#ffcc00 size=5>TÍTULO</FONT></P></TD></TR>
<TR>
<TD>
<DIV align=left>
<DIV style="OVERFLOW: auto; WIDTH: 502px; HEIGHT: 164px">
<P align=center><FONT color=#ff0000 size=5>TU TEXTO AQUI</FONT></P>
<P align=center><FONT color=#ff0000 size=5>TU TEXTO AQUI</FONT></P><FONT size=2><FONT color=#ff99cc>
<P>&nbsp;</P>
<P align=center><FONT color=#ff0000 size=5>TU TEXTO AQUI</FONT></P>
<P align=center><FONT color=#ff0000 size=5>TU TEXTO AQUI</FONT></P>
<P align=center><FONT color=#ff0000 size=5>TU TEXTO AQUI</FONT></P>
<P align=center><FONT color=#ff0000 size=5>TU TEXTO AQUI</FONT></P>
<P align=center><FONT color=#ff0000 size=5>TU TEXTO AQUI</FONT></P></DIV></DIV></FONT></FONT></TD></TR></TBODY></TABLE>

Cuando la imagen que useís para el fondo sea demasiado pequeña, se repetirá tantas veces hasta completar todo el fondo de vuestro blog.

Para conocer la URL de las imágenes pues cnd las veas en algun sitio web (desde tu ordenador no sirven) pinxas encima d ella con el boton drxo dl ratón y dale a propiedades. Se te abrirá una nueva ventana y tienes q copiar la dirección que hay al lado de donde pone "Dirección WEB URL" y listo.

Aquí puedes ver una imagen con el resultado que quedaría:

 

8. TEXTO CON BORDE DE COLOR (I)

<FONT style="FILTER: glow(color=#ff0000,strength=5); WIDTH: 420px; HEIGHT: 92px">
<DIV align=center>
<P></P>
<DIV align=center>
<P><FONT face="comic sans ms" color=#99e7ff size=7>Tu texto aqui </FONT></P></FONT>
<P></P></DIV></DIV></FONT>

Para poner el color que querais, solo teneis que cambiar los códigos que aparecen en rojo. Los códigos de colores (almohadilla seguida de 6 cifras) los teneís en la siguiente web:

http://www.colorschemer.com/online.html

Y donde pone strength es el tamaño del borde, mientras mayor sea el número mayor resaltado saldrá vuestro texto.

Aquí puedes ver una imagen con el resultado que quedaría:

 

9. TEXTO CON BORDE DE COLOR (II)

<DIV><FONT face=Ravie color=#9900cc><FONT style="FILTER: glow(color=#FF96F0,strength=5); HEIGHT: 40px" size=6>Tu texto aqui</FONT></FONT></DIV>

Aquí puedes ver una imagen con el resultado que quedaría:

 

10. CUADRO CON SCROLLBAR

<P>
<DIV align=center>
<DIV style="BORDER-RIGHT: black 7px dotted; BORDER-TOP: black 7px dotted; SCROLLBAR-FACE-COLOR: red; FONT-SIZE: 8pt; SCROLLBAR-HIGHLIGHT-COLOR: white; OVERFLOW: auto; BORDER-LEFT: black 7px dotted; WIDTH: 372px; SCROLLBAR-SHADOW-COLOR: white; COLOR: red; BORDER-BOTTOM: black 7px dotted; FONT-FAMILY: ariel; SCROLLBAR-DARKSHADOW-COLOR: black; HEIGHT: 229px; BACKGROUND-COLOR: white">
<P align=center><FONT size=7>tu texto aqui</FONT></P>
<P align=center><FONT size=7>tu texto aqui</FONT></P>
<P align=center><FONT size=7>tu texto aqui</FONT></P>
<P align=center><FONT size=7>tu texto aqui</FONT></P>
<P align=center><FONT size=7>tu texto aqui</FONT></P>
<P align=center><FONT size=7>tu texto aqui</FONT></P>
<P align=center><FONT size=7>tu texto aqui</FONT></P></DIV></DIV>

La textura del filo la podemos modificar cambiando la palabra dotted (punteado) por las siguientes variedades:

Aquí puedes ver una imagen con el resultado que quedaría:

 

11. VÍNCULO A UNA WEB DESDE UNA IMAGEN

<P align=center><A title=*****Ana***** href="http://spaces.msn.com/members/AnaCaroGarcia" target=_blank><IMG style="VERTICAL-ALIGN: middle; WIDTH: 137px; HEIGHT: 142px" height=67 src="http://framboise78.free.fr/Astres/soleil027.gif" width=238 align=left border=0></A></P>

Tendreis q cambiar las tres cosas q están marcadas en rojo: el nombre q queréis q salga al pasar el ratón encima de la imagen, la web que queréis que se carguen al pinchar en la imagen y la URL de la imagen.

*****Ana*****

12. TEXTO CON SOMBRA (I)

<DIV>
<P align=center><SPAN style="FONT-SIZE: 24px; FILTER: Shadow(Color=#00BFFF, Direction=45); WIDTH: 64.92%; HEIGHT: 50px">
<DIV align=left>
<P></P>
<DIV align=center>
<P><FONT color=#0000ff>TU TEXTO AQUI</FONT></P></DIV></SPAN></DIV></DIV>

 

13. TEXTO CON ONDULACIÓN

<TABLE cellSpacing=0 width="100%" border=0>
<TBODY>
<TR>
<TD></TD></TR>
<TR>
<TD></TD></TR>
<TR>
<TD>
<P><SPAN style="FONT-SIZE: 24px; FILTER: Wave(Add=0, Freq=2, LightStrength=20, Phase=10, Strength=5); WIDTH: 74.14%; COLOR: orange; FONT-FAMILY: Arial Black; HEIGHT: 54px">
<P align=center><STRONG><FONT face="Lucida Handwriting, Cursiva" color=#ff00ff size=6>TU TEXTO AQUI</FONT></STRONG></P></SPAN>
<P></P></TD></TR></TBODY></TABLE>

 

14. TEXTO CON SOMBRA (II)

<P align=center><SPAN style="FONT-SIZE: 24px; FILTER: DropShadow(Color=#0066CC, OffX=5, OffY=-3, Positive=1); WIDTH: 74.52%; HEIGHT: 59px"><FONT face="Lucida Handwriting, Cursiva" color=#ff6600>TU TEXTO AQUI</FONT></SPAN></P>

 

Gracias Zoe

Si quiere visitar su espacio pinxa en la imagen siguiente:

Volver