viernes, 25 de enero de 2008

DISEÑO HTML DE TEXTO PARA TU BLOG

En este post os voy a mostrar algunas formas de poder cambiar a través del código html textos para mostrar en nuestro blog. Iré poniendo el código y un ejemplito.

TEXTO DESLIZANTE HACIA UN LADO


<marquee>TEXTO</marquee>


El Blog de Nya

TEXTO ONDULADO


<table style="Filter: Wave(Add=0, Freq=2, LightStrength=10, Phase=3, Strength=3)">TEXTO</table>


El Blog de Nya


TEXTO SOMBREADO


<span style="height: 20;filter:blur(add=1,direction=270,strength=10)">TEXTO</span>


El Blog de Nya

TEXTO DESLIZANTE DE ABAJO A ARRIBA


<marquee behavior=scroll direction=up scrollamount=1 height=60>TEXTO</marquee>


El Blog de Nya

CITA CON TÍTULO


<blockquote><span class="texto_mini">TITULO DE CITA</span><hr>TEXTO DE CITA<hr></blockquote>


Isaac Newton
”Lo que sabemos es una gota de agua, lo que ignoramos es el océano“

TEXTO CON COLOR


<font color="CÓDIGO HTML COLOR">TEXTO</font>


El Blog de Nya

En un post os puse una herramienta para conseguir los códigos html de los colores, visitad este enlace: Colores para tu blog


LINEA DE SEPARACIÓN


<hr width='90%' align='left'>





ALINEAR TEXTO A LA DERECHA


<div align="right">TEXTO</div>


El Blog de Nya


ALINEAR TEXTO AL CENTRO


<div align="center">TEXTO</div>


El Blog de Nya


ALINEAR TEXTO A LA IZQUIERDA


<div align="left">TEXTO</div>


El Blog de Nya


CAMBIAR TAMAÑO DEL TEXTO


<span style="font-size:NUMEROpt">TEXTO</span>


El Blog de Nya

TEXTO TACHADO


<strike>TEXTO</strike>


El Blog de Nya

TEXTO SUBRAYADO


<u>TEXTO</u>


El Blog de Nya

TEXTO CURSIVA


<i>TEXTO</i>


El Blog de Nya


TEXTO NEGRITA


<b>TEXTO</b>


El Blog de Nya

Y como sabeis, podeis hacer múltiples combinaciones como poner un texto de un color en concreto, a su vez que sea en negrita con un tamaño determinado y subrayado. Esto por poner un ejemplo, vais uniendo códigos y listo.

10 comentarios:

SrCabronazo dijo...

Grandes objeciones, no tengo para este artículo.

Simplemente he de decir, que muchos de los efectos con los que Nya nos ilustra, son atributos aplicables también a otras etiquetas diferentes de las mostradas en los ejemplos. Son aplicables también en otros contextos.

Por ejemplo el "align=", hace que "lo que sea" vaya a ser alineado de una determinada manera, normalmente izquierda (left), derecha (right) o centro(center).
Es aplicable a texto dentro de un Div, de un párrafo, de la celda de una tabla, etc.
Pero tamblén a una tabla, a una imagen, o a otros objetos.

Sigo aconsejando los numerosos tutoriales que hay en la red sobre el "HiperText Markup language" (html), y si teneis instalado office, en vuestro ordenador teneis ya uno, en inglés, eso si.

También es muy útil ver como están hechas las páginas que os gusten viendo su código, si no está protegido.
(Menú Ver de vuestro navegador, normalmente)

Y lo imprescindible: Experimentar con con ficheros Html locales, en vuestro propio ordenador.

Hala, ya teneis trabajo para una temporadita.

Salud os.

Mildred dijo...

1-Nya, Sr. Cabronazo... estoy investigando, estudiando y trabajando miles de posibilidades, con el texto, gracias...
2- ¿Cómo se hace para meter el texto en un cuadrado? A través del post de la marquesina en movimiento, lo he logrado hacer, pero en cuanto quito el movimiento al texto, la fastidio... no sé identificar que parte es justo la del cuadrado..
¿podrías ayudarme?

gracias

Nya dijo...

Es muy fácil, Mildred, en el post que scribí de cómo se hace una tabla está explicado.

No es que metamos el texto en una tabla, sino que hacemos una tabla en la que tan sólo hay una columna y una fila.

Si te fijas, todos mis post en los que explico códigos, éstos están metidos en un cuadrado.

Es tan sencillo como escribir delante del texto (o fotos) el código <table border=1><td> y cuando hayas terminado de poner lo que querías escribir </td></table>

A esto,le puedes cambiar el grosor de la linea, yo he puesto 1 pero puedes poner 0 para que no se vea el borde o un número mayor para que sea más grueso.

Y también le puedes cambiar el color del fondo del cuadro y del borde. En este caso el código sería <table border=1 bordercolor="COLOR" bgcolor="COLOR"><td><font color="COLOR">TEXTO QUE QUEREMOS ESCRIBIR</font></td></table>

Nya dijo...

Se me ha olvidado decir que bordercolor es el color del borde, bgcolor es color de fondo, es decir, el relleno del cuadrado o tabla y font color es el color de la letra que haya dentro de la tabla.

Tengo un poco de alzheimer,jejeje, y se me olvida la mitad de las cosas que quiero poner.

Nya dijo...

Para cambiar el tamaño de letra de tu sidebar tienes que ir a tu plantilla, en edición HTML y buscar la parte del código donde pone lo siguiente:

#sidebar {
width: 220px;
float: right;
}

En vez de 220px igual tienes otro número, pero la parte del código es tal cual esa.

Ahí has de añadir una linea antes de la última llave que ponga font-size:120%; o el número que quieras, vas probando a ver cómo te gusta que quede.

Nya dijo...

Si quieres cambiar el tamaño de los títulos de tus post (entradas) o el de los títulos de la columna lateral (sidebar) has de buscar en tu plantilla, en editar html la parte del código en la que pone /*Headings
------------------------------*/
h2 {
margin 1.sem 0.75em;
font: bold 78%/1.4em "Trebuchet MS", Trebuchet, Arial, Verdana, Sans-serif;
text-transform: uppercase;
letter-spacing: .2.em
color: #777;
}

Los números o letras puedes tenerlos diferentes, depende de tu plantilla, pero el código es así.

Si te fijas hay un porcentaje (78%) después de bold...ése es el que hay que cambiar. Ve probando porcentajes hasta encontrar el que más te guste.

Mildred dijo...

Mil gracias...

SuperBlade18 dijo...

Hola, puedes me ayudas? soy una persona sorda, me ayudas como se hacer el añadir un gadget a la izquerida. porque ya los tengo a la derecha, solo quiero a la izquerida, puedes me firmas un comentario en mi blog:

http://superblade18.blogspot.com/

por favor, Gracias

mi gran aficion de tu mejor diseño de blogspot.

soulreaverphotography dijo...

Hola NYA,

tengo un pequeño problema con mi blog. Soy un total principiante y de HTML ni idea. Si vas a mi blog veras una foto que encabeza el blog. Es grande y tiene un marco gris por detras que no esta bien encuadrado. No se como hacer para alargarlo o directamente quitarlo de ahi. Lo he logrado, lo malo es que tambien quito todos los recuadros de las fotos que publico hacia abajo y me gusta como se ven las fotos con ese recuadrito. Ojala me puedas ayudar.
Saludos
SoulReaver

luis felipe dijo...

hola, me llamo felipe, y por una tarea del colegio nos pidieron hacer un blog, soy nuevo en estoy, te agradeceria mucho me dieras algunos trucos para embellezer el blog =D te dejo mi correo felipe_kool081@hotmail.com o fepe888@hotmail.com