CSS: Añadir un estilo a tu plantilla Blogger

Como todo buen informático me gusta hacer las cosas una vez y en un único sitio, y no que para un cambio que quiera hacer tenga que ir recorriendo todo el trabajo hecho hasta la fecha...

Aquí voy a deciros como crear un estilo de clase para que podáis dar formato a una parte repetitiva de vuestras entradas. Es lo que yo uso cuando pongo código:

Esto es un ejemplo de una capa con texto usando la clase "codigo"; cuando escribo la entrada lo escribo normal y lo único que hago es asignarle la clase CSS "codigo" a la etiqueta div que lo contiene.

Para poder hacer esto primero tenéis que saber un poco de CSS para:

• Crear el código del estilo que queréis conseguir.
• Rebuscar entre el código fuente de una web en la que habéis visto algo que os gusta y ver su estilo para sacarlo (siempre que no este protegida su autoría, lo cual me parecería muy extraño pero cosas mas raras se han visto... como que no se puedan vender teléfonos con los bordes redondeados y una gran pantalla según las patentes de Apple... lamentable).
• Utilizar estilos CSS disponibles en Internet. En muchas páginas de diseño hay variedad de estilos gratuitos para elegir.

Una vez tengáis el código de vuestro estilo debéis ir a "Plantilla" y donde se ve la miniatura de vuestro blog actual le dais a "Personalizar".
Elegimos la opción "Avanzado" y vamos al final de la lista de todos los elementos hasta "Añadir CSS". Esta opción nos permite añadir código CSS propio a vuestra plantilla. En mi caso para el estilo que uso para el código utilizo lo siguiente:

.codigo {align: center; background-color: purple; border-color: #660066; border-style: solid; color: white; font-family: Courier; line-height: 24px; margin-left: 2%; padding: 5px 15px 5px 15px; width: 90%;}

Así ya podéis llamar al estilo de clase "codigo" para que os formatee el elemento que queráis. La forma más fácil es incluir vuestro texto en una capa "div" y otorgar a su atributo "class" el valor del nombre de vuestro nuevo estilo.

Por otra parte podéis modificar el código CSS de otras partes de vuestra plantilla. En mi caso utilizo actualmente estas:

.content {margin-top:-50px;}
.post-body h2 {text-transform: uppercase; font-size: 140%; color: #0d009c; text-align: left;}
.post-body img {box-shadow: 0 0 1em 0.3em #999999;}
.post-body {text-align: justify;}

• La primera ajusta el blog para que al desactivar la barra de navegación de blogger no se me quede el hueco en blanco arriba.
• La segunda hace que los encabezados que están dentro de cada entrada estén en mayúsculas, con una fuente mayor y de otro color al resto y alineados a la izquierda (en vez de justificados).
• La tercera produce una sombra gris centrada en las imágenes que están dentro de la entrada (podéis aprender más sobre sombras en esta entrada que hice sobre ellas).
• La cuarta realiza una alineación justificada en el cuerpo de la entrada.

Recomiendo usar esta opción (la de "Añadir CSS" en personalización de "Plantilla") en vez de modificar directamente el código HTML de la plantilla, ya que es más fácil de localizar y usar por blogeros menos expertos en CSS. Y recordar que la notación para un estilo de clase es poner un [punto - '.'] delante de su nombre como veis en los ejemplos que os he puesto.

En otro blog que colaboro con su diseño también exporte rápidamente muchos de estos estilos sin tener que buscarlos dentro del código HTML de la plantilla. Estos son los ejemplos en Cool Mommies:

.content {margin-top:-60px;}
.post-body h2 {text-transform: uppercase; text-decoration: underline;}
.post-body img {box-shadow: 0 0 1em 0.3em #ea9999;}
.post-title {color: #ea9999;}
.Header .description {color: white;}

Aquí añadí dos líneas, una para cambiar el color del título de las entradas (pues en la plantilla predeterminada se usa el mismo color que el de los enlaces) y otra para cambiar el color de la descripción en la cabecera del blog (igualmente en la plantilla predeterminada no se puede elegir otro color con la interfaz de personalización).

Espero que os sea de utilidad y hayáis observado lo fácil que es cambiar el diseño de todas nuestras entradas en una única parte del código en vez de tener que cambiar todas las entradas si vais formateando cada una de ellas con el editor WYSIWYG que hay para redactarlas.

Un saludo.