Usar el diseñador de plantillas de Blogger

La plataforma de blogging Blogger dispone de una herramienta llamada diseñador de plantillas que permite personalizar, de forma sencilla, el aspecto de un blog, principalmente su estructura, colores y fuentes. Es muy útil para aquellos usuarios con pocos o nulos conocimientos de CSS (hojas de estilo en cascada), que es el lenguaje que se utiliza en Internet para definir cómo se muestran los contenidos de los sitios web. Cabe notar que el diseñador sólo está disponible para aquellos blogs de Blogger que utilicen alguna de las plantillas que proporciona la propia plataforma. Los usuarios que usen plantillas customizadas por terceros no podrán disfrutar, a priori, de la total funcionalidad de esta herramienta.

Blogger ha renovado, también, las plantillas que ofrece de forma predeterminada a sus usuarios. Aunque siguen siendo más bien pocas, éstas son más modernas y más completas que las anteriores. Concretamente, las nuevas plantillas son seis: Sencillo, Picture Window, Fantástico, Filigrana, Etéreo y Viajes. Cada una de ellas dispone, además, de diversas variantes.

Antes de continuar recuerdo que, cuando estamos tratando con aspectos de diseño, siempre es aconsejable probar primero los cambios que deseamos aplicar en un blog de pruebas, que se puede crear gratuitamente desde el propio Blogger. En su defecto, también podemos guardar una copia de seguridad de nuestra plantilla actual por si necesitamos restaurarla si no nos gusta el resultado de nuestras modificaciones. Asimismo, es conveniente hacer uso de la previsualización o vista previa antes de ejecutar cualquier cambio.

Al diseñador de plantillas de Blogger se accede desde el apartado Plantilla del blog, haciendo click sobre Personalizar.

Opciones básicas del diseñador de plantillas

Plantillas: Seleccionar la plantilla (y la variante de la misma) que deseamos utilizar.

Fondo:

• Para las plantillas Sencillo, Picture Window, Etéreo y Viajes: Escoger la gama de colores del blog, entre los temas sugeridos o de forma personalizada.
• Para todas las plantillas: Utilizar una imagen de fondo, a elegir entre las distintas imágenes proporcionadas (que están clasificadas por categorías como abstracto, arte, negocios, celebraciones, etc.) o cualquier fotografía que nos guste y que subiremos desde nuestro PC.
• Para las plantillas Fantástico, Filigrana y Etéreo: Escoger, también, la alineación (arriba a la izquierda, arriba centrada, arriba a la derecha, etc.) y el tipo de mosaico (repetición; con o sin él, vertical o horizontal) de la imagen de fondo.

Ajustar ancho: Seleccionar la anchura en píxeles del blog completo, y la de las barras laterales (izquierda y/o derecha).

Diseño: Elegir el diseño del cuerpo del blog (sin barras laterales, con barras a los dos lados, con una barra partida, etc.) y el del pie de página (una, dos o tres columnas). Los cambios que aquí realicemos se verán reflejados en el apartado "Diseño" del blog, desde el cual se pueden añadir y organizar los gadgets o artilugios de la plantilla.

Avanzado: Desde esta pestaña, se pueden personalizar los colores y las fuentes de diversos elementos del blog. Los elementos disponibles (que vemos a continuación) varían en función de la plantilla utilizada. La única característica común es la de Añadir CSS, un campo de texto en blanco desde el que podemos escribir código que afecte a otros aspectos del diseño del blog. El propio Blogger proporciona una explicación básica de lo que podemos hacer con CSS.

Opciones avanzadas del diseñador de plantillas

Página:

• Texto: tipo, tamaño y color de la fuente o tipografía de los textos del blog.
• Fondos: colores del fondo exterior, del fondo principal y del borde del blog.
• Enlaces: colores de los enlaces, de los enlaces visitados y de los enlaces cuando se coloca el cursor del ratón encima de ellos.
• Fondo de la columna lateral: colores del fondo y del biselado de la columna lateral del blog.
• Pager: color del fondo del pager. El pager es el espacio de debajo de las entradas que contiene el índice del blog (página principal) y los botones de navegación (entradas antiguas/entradas recientes).
• Pie de página: colores del fondo, del título, del texto y de los enlaces del pie de página del blog.

Cabecera:

• Fondos: color del fondo de la cabecera del blog.
• Título del blog: tipo, tamaño y color de la fuente o tipografía del título del blog.
• Descripción del blog: tipo, tamaño y color de la fuentoe o tipografía de la descripción del blog.

Pestañas: los distintos apartados del menú de navegación del blog.

• Texto de la pestaña: tipo, tamaño y color (sin seleccionar y seleccionado) de la fuente o tipografía de las pestañas del blog.
• Fondo de las pestañas: color (sin seleccionar y seleccionado) del fondo, del borde, del biselado y del separador de las pestañas del blog.

Entradas:

• Cabecera de fecha: tipo, tamaño y color del texto de la cabecera de fecha de las entradas, así como los colores del fondo y del borde de la misma.
• Título de entrada: tipo, tamaño y color de la fuente o tipografía del título de las entradas.
• Fondo de la entrada: colores del fondo, del biselado y del borde de las entradas.
• Pie de página de la entrada: colores del texto, del fondo y de la sombra del pie de página de las entradas. En el pie es donde suelen aparecer el nombre del autor o autora del blog, las etiquetas utilizadas, etc.

Gadgets:

• Título del gadget: tipo, tamaño y color de la fuente o tipografía de los títulos de los gadgets.
• Texto de gadgets: tipo, tamaño y color de la fuente o tipografía de los textos de los gadgets.
• Enlaces de gadgets: colores de los enlaces, de los enlaces visitados y de los enlaces cuando se coloca el cursor del ratón encima de ellos de los gadgets.
• Fondo del gadget: colores del fondo, del biselado y del borde de los gadgets.

Imágenes:

• Colores del fondo y del borde de las imágenes.
• Color del texto de las leyendas de las imágenes.

Acentos:

• Color de la línea del separador (línea vertical que separa las entradas de la barra lateral del blog).
• Color del contorno de las etiquetas (línea horizontal que separa la cabecera del blog del resto de la página).

Feeds:

• Feed: color del texto del feed.
• Enlaces a feeds: colores de los enlaces, los enlaces visitados y los enlaces cuando se coloca el cursor del ratón encima de ellos del feed.

Recordad que, a medida que vayamos aplicando cambios, podemos ver el resultado de los mismos en la vista previa del blog que aparecerá justo debajo de las distintas opciones del diseñador de plantillas. Cuando estemos satisfechos, haremos click sobre Aplicar al blog para guardar las modificaciones.

Artículo actualizado a 6 de septiembre de 2012