JMiur [E]

Esta es una respuesta genérica a una pregunta concreta: ¿cómo puedo darle estilo CSS a un post pero que no afecte a otros?

Hay varias formas de utilizar las propiedades de estilo. En Blogger, estamos acostumbrados a hacerlo en la plantilla, entre las etiquetas <b:skin> y </b:skin>, que se encuentra dentro del HEAD.

Podemos definir las propiedades de una etiqueta:
H1 {... propiedades ...}
darle un nombre para poder utilizarla repetidamente con el atributo class:
.nombre {... propiedades ...}
o un identificador único;
#nombre {... propiedades ...}
También es usual que agreguemos estilo inline, esto es, dentro de la etiqueta, por medio del atributo style:
<p style="... propiedades ..."> [ contenido ] </p>
o que agrupemos propiedades dentro de las etiquetas <style&/lt; </style&/lt;:
<style type="text/css">
DIV  { ... propiedades ...}
P { ... propiedades ...}
.nombre { ... propiedades ...}
</style>
En todos estos casos, la sintaxis de las propiedades es la misma:
propiedad: valor;
Aunque lo utilizamos menos, otra manera de incorporar estilo es creando un archivo externo al que, por lo general se le coloca la extensión CSS pero que no es otra cosa que un archivo de texto sin formato. En él, escribimos las propiedades, y luego la cargamos por medio de la etiqueta LINK:
<link rel=stylesheet href="URL_archivo.css" type="text/css">
Con todas estas posibilidades, si quisiéramos crear un estilo para un post en particular (por ejemplo, queremos poner un slideshow o un álbum de fotos pero no nos interesa tenerlo en la plantilla), podemos recurrir a la etiqueta <style> y agregar las propiedades pero claro, si el estilo ocupa varias líneas, se producirá el mismo error de siempre, aparecerán saltos de línea indeseados así que deberíamos escribir todo en una sola línea.

El problema se solucionaría si pudiéramos utilizar la etiqueta <link> y tener un archivo externo pero Blogger la rechaza. Nos queda una posibilidad más.

Una hoja de estilo puede ser importada con @import que puede insertarse dentro de la etiqueta STYLE:
<style type="text/css"> @import url(archivo.css);</style>
La única diferencia con la etiqueta LINK es su sintaxis y si bien las reglas estrictas dicen que @import sólo puede usarse dentro del HEAD de la página, para Blogger es indiferente y no hay motivo práctico para no aprovecharnos de ello.

De manera similar, podemos agregar código JavaScript en un post para utilizarlo sólo en este y que no afecte al resto del blog. También hay dos modos elementales, escribir el código dentro de la etiqueta SCRIPT, todo en una sóla línea:
<script> ... instrucciones ... </script>
o utilizar un archivo externo que, por lo general, tiene la extensión JS:
<script src="archivo.js" type="text/javascript"></script>
Lamentablemente, Blogger no provee alojamiento para archivos por lo que debemos subirlos a otro servidor. Dos servicios que utilizo son Fileden y Google Page Creator pero puede ser cualquier otro que permita subir archivos de texto y admita hotlinks.

7 comentarios:

Ignasi  

Hola JMiur,

Aquí sigo investigando el tema de hacer el blog "printer friendly" :$

He visto muchos sitios que la mejor opcion es hacer 2 estilos de CSS para el blog, uno para "screen" y otro para "print"

Así que si uno quiere imprimirlo, apretaria al boton "print" y se cargaria la version para imprimir. Si no... la scree seria por defecto.

Ahora provaré de hacer esto, a ver si funciona el tema @import.

Gracias por el dato, voy a continuar peleandome :)

Responder
JMiur  

Esa es una buena idea. Fijate en esta página, y en esta otra, tal vez te sirvan.

Responder
Anónimo  

Amigo me puedes pasar el template de tu blog para hacer mi blog = al tuyo???

Responder
JMiur  

¿Te parece? :-|

Responder
JMiur  

Gracias por el comentario, rc :)

Responder
AraceLi  

Hola :) Soy nueva con todo esto de los blog. Y quiero saber como hacer para poner entradas en los costados. PODRIAS AYUDARME?

Responder
JMiur  

No ´se a qué te refieres con eso de poenr entradas a los costados.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR