Estilos CSS en Blogger

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.