Como cambiar el diseño CSS de las plantillas de Blogger

Existen nada menos que 3 formas de cambiar el diseño CSS de las plantillas de Blogger, una de ellas sencillas, usando las ayudas que nos aporta el editor de Blogger y dos de ellas entrando en el código de la plantilla para realizar los cambios a mano. Vamos a señalar sus ventajas y desventajas, para ver porque para personalizar a la medida y transformar el diseño de las plantillas blogspot es necesario aprender un poco de programación CSS, adaptada a Blogger. Antes de entrar en detalle hay que entender que el código CSS de las plantillas de Blogger está dentro de la plantilla (hoy en día se suele escribir fuera del código HTML) y que está formada por dos regiones: El código CSS normal, y las Variables Blogger, en estas últimas se dan valores CSS que se aplicarán a continuación sobre el código CSS normal. Es realmente algo complejo, ya que se podrían conseguir los mismos resultados sólo con el CSS normal.

1. Editor de Plantillas. La primera forma de modificar el aspecto de tu blog es entrar en este programa de ayuda donde te permite cambiar las Variables de Blogger como el color del fondo, la anchura del la columna lateral, el tipo de fuente para el título, para el texto de los blogs, etc. El primer método tiene la gran ventaja de que es muy intuitivo y eso está muy bien para principiantes, porque desde el primer día ya puedes elegir algo tan importante como el los colores del blog. También hay que tener en cuenta que el método tiene dos limitaciones.

• Sólo puedes cambiar las Variables del diseño CSS definidas en la plantilla. Por ejemplo existen variables para el color de fondo de la pantalla, pero no existe la variable del fondo de los titulares. Si quisieras tener un blog con texto en negro, fondo en blanco, pero que los titulares de cada post fueran con letras blancas sobre un fondo oscuro, no podrías hacerlo.
• Sólo puedes dar a las Variables los valores que te permite el Edito de Código CSS. Esto implica que por ejemplo para los colores del fondo el color se debe colocar en un formato en el que podemos añadir todos los colores y también que los fondos sean transparentes, pero el Editor no permite aplicar el sistema RGBA que tiene también colores translucidos, con un % de transparencia. Otro ejemplo, el tamaño de la plantilla se puede definir de forma variable con % para que varíe el contenido que se muestra en el blog si la pantalla es de menor tamaño, pero Blogger el editor de plantillas de Blogger sólo deja la opción de hacerlo con píxeles.

2. Cambiar la plantilla a mano respetando las Variables de Blogger. Esto consiste en entrar en el editor de la plantilla HTML y modifica a mano el código pero respetando el formato de las plantillas blogspot. Estos cambios requieren tener algún conocimiento de CSS y sobre como funcionan estas Variables. Esto permite que las plantilla que se crea aún se puede editar desde el Editor de Plantillas y es lo que hay que hacer si quieres crear un template de Blogger para difundirlo.  La diferencia con la plantilla anterior es que puedes:

• Añadir nuevas Variables CSS en el diseño y por lo tanto modificarlas. Esto te permite por ejemplo diferenciar los links de diferentes zonas del blog, aportándoles diferentes colores y efectos gráficos. Así podrías tener links en los títulos con un color diferente a los enlaces que hay dentro del texto y que al pasar el ratón sobre ellos se iluminaran o cambiaran de color, mientras que los otros links del blog fueran fijos. 
• Cambiar el CSS directamente sobre el código para añadir propiedades CSS3 como el degradado, bordes redondeados o transiciones.
• Borrar Variables CSS que no uses. Esto es útil para hacer la páginas más sencilla y que cargue más rápido. A veces tenemos dos variables que hacen los mismo y se pueden reunir como la misma.
• Cambiar el rango de acción de una Variable Blogger. Esto se realiza desde la parte del código CSS clásico, modificando las zonas a las que se aplica el diseño. Esto quiere decir que si por ejemplo tenemos una Variable que afecta al texto de todo el blog, podemos cambiarlo para que sólo se aplique a las columnas laterales.

3. Eliminar las Variables de Blogger y cambiar el código CSS de la forma clásica. Si has hecho algún curso de CSS3 algo que puedes hacer es directamente borrar la parte de las variables de Blogger y construir el código CSS de forma directa, tal y como se hace en cualquier página Web. Las ventajas que tiene este método es que eliminas de momento un montón de código, por lo que subirá de forma instantánea el ratio texto/HTML que es un punto importante en el posicionamiento SEO del blog. Otra ventaja es que el código será más sencillo de entender para un programador profesional ya que está escrito de la forma normal.

Otro punto importante es que al borrar las Variables de Blogger la plantilla no la puedes cambiar con los dos primeros métodos. En resumen, que si alguien se copia tu plantilla y es un principiante no podrá cambiarla, algo que en principio es bueno si quieres tener un diseño diferenciado y es inapropiado si lo que buscas es crear plantillas para difundirlas. Como podrás ver la forma en la que vamos a modificar las plantillas depende sobre todo del objetivo que tengas y de tu nivel de conocimientos de CSS.

Imagen: sin copyright.