dfba - el diseñador de plantillas 3

Hace más de un año que publiqué el último tutorial sobre DFBA. No iba a seguir esta serie porque excepto la primera entrada  en la que hablaba sobre consejos para mejorar tu blog, las otras prácticamente no tienen visitas en comparación con otros tutoriales que tengo en el blog. 

Sin embargo, no me gusta nada dejar las cosas a medias, así que voy a acabar esta serie. Sé que es una tontería porque estos tutoriales de blogger me llevan horas: hay que planificarlos, escribirlos, hacer las capturas de pantalla y editarlas... pero qué le vamos a hacer. Es que cada vez que pienso que está a la mitad me da urticaria y me salen ronchas por el cuerpo

Y una vez dicho esto, voy a seguir por donde me quedé, explicando la pestaña  avanzado del diseñador de plantillas.

DISEÑO BLOGGER: EL DISEÑADOR DE PLANTILLAS 3

NOTA: una de las ventajas de diseñar el blog en el editor de plantillas es que se van viendo todos los cambios que se hacen en el mismo momento de hacerlos. No te olvides de darle a botón APLICAR AL BLOG cuando hayas terminado y haz una copia de seguridad siempre que vayas a hacer algún cambio importante por si metes la pata. 

Título de entrada

Como su propio nombre indica, es el lugar donde se elije la configuración que se le va a dar al título que van a tener nuestras entradas. En este caso, blogger solo deja elegir el tipo de letra (entre los que trae por defecto) el tamaño y si quieres que sea cursiva (I)  o negrita (B). 

El título de la entrada es una de las cosas que se puede cambiar con relativa facilidad y se puede poner otro tipo de fuentes (como las de google fonts) o personalizar el color. Se hace metiéndote en la plantilla .html, pero es bastante fácil. 

Cabecera de fecha

En esta sección le puedes dar formato a fecha de la entrada, aunque solo te deja elegir el color de texto y el color de fondo. La paleta de color es la misma que se usa en el texto de página y en los fondos (es la paleta de color que SIEMPRE vas a encontrar en el diseñador de plantillas) por lo que puedes personalizar también el color poniéndole el código de color que quieras usar.

En la plantilla simple, la cabecera de fecha se considera un gadget así que, como verás más adelante, el tipo de letra que le quieres aplicar se puede elegir allí.

La fecha es otra cosa que se puede cambiar con relativa facilidad en blogger. Por ejemplo, con un poco de .css la podemos poner a la derecha.

Pie de página de la entrada

Aquí se puede configurar algunos aspectos del pie de página de la entrada, es decir, el lugar donde aparecen los botones sociales, las etiquetas, si hay comentarios... Las secciones que aparecen en el pie de página de entrada se configuran en Diseño, en el escritorio del blog, el botón que está justo encima de Plantilla; cuando explique la pestaña diseño, lo veremos. 

Gadgets

En este submenú, se pueden elegir las características que le vas a poner a tus gadgets (los apartados que aparecen en la barra lateral, datos personales, entradas más populares...). Al igual que el pie de entrada, los diferentes gadgets se localizan en Diseño (escritorio blogger) y es ahí donde se eligen los que se quieren poner, se los ordena... también lo explicaré más adelante.

Como la fecha de entrada se considera un gadget, se verá modificada por el tipo de letra que se elija aquí. 

Imágenes

En este submenú se configura el aspecto de las imágenes o fotografías que subes al blog. Por defecto, en esta plantilla aparecen con un marco blanco y una especie de sombra, aunque en los parámetros hayas puesto transparente. Aquí se puede elegir el color del fondo de la fotografía, el color del borde la imagen y también el color de la leyenda (un texto que se escribe sobre la foto).

Es relativamente sencillo quitarle a la imagen ese marco blanco y esa sombra con un poco de css. 

Acentos

Los acentos son los separadores del blog, es decir ,la línea que separa la columna de la entrada y la de los gadgets y las líneas que rodean a las pestañas. Si no quieres que se vean ninguna de ellas, puedes elegir la opción transparente y desaparecen, pero también se pueden personalizar con algún color. En el caso de esta plantilla se ha optado por poner transparente el contorno de las etiquetas y por darle color a la línea del separador de columnas.

Mobile Button Color

Solo nos permite cambiar el color y no se puede hacer nada más desde el editor de plantilla.

Añadir CSS

En este submenú se le puede dar estilo y personalidad a la plantilla de blogger, sin necesidad de meterte de lleno en el editor .html. Es supercómodo y fácil porque, entre otras cosas, te permite ver en vivo y en directo los cambios que le haces a la plantilla. Para que veas como funciona, voy a centrar la cabecera del blog con un código super sencillo.

El código .css es el siguiente:

.header .widget {

text-align:center;}

.header img {margin:0 auto;}

Es muy importante que cuando lo metas en el editor le des a ENTER justo después de la última llave, porque si no lo aplica.

Borrar cambios 

Justo debajo de cada uno de los submenús (menos en añadir CSS), hay una opción que se llama borrar cambios avanzados y está en azul. Lo que hace es que borra los cambios que hayas hecho y te pone por defecto los de la plantilla original.

Hay un montón de códigos .css que se utilizan para que la plantilla quede mucho más personal y diferente a las de blogger. Si quieres que hable un poco más sobre esto, déjame un comentario en la entrada y te explico mejor qué es el .css y te doy un montón códigos para que pongas tu plantilla a tu gusto.

OTRAS ENTRADAS DE DFBA:

1. DFBA - consejos para mejorar tu blog

2. DFBA - la estructura de tu blog

3. DFBA - tipos de estructura

4. DFBA - copias de seguridad

5. DFBA - el diseñador de plantillas 1
6. DFBA - el diseñador de plantillas 2

Si te ha gustado la entrada, compártela en las redes sociales; así me ayudas a llegar a más gente.

Los botones está justo debajo