Cómo Personalizar los Encabezados o Headings en los Posts

Anteriormente hablábamos de los encabezados o headings (en inglés), y cómo estructuran nuestro contenido y además lo hace que el contenido sea más accesible.



También comentábamos que Blogger ya cuenta con una opción dentro del panel de edición de entradas que permite agregar encabezados fácilmente, para que podamos agregarlos en los títulos de los distintos apartados o secciones de la entrada.



Los encabezados o headings cuentan con la gran ventaja de tener cierto formato que los distingue del resto del contenido: el tamaño de la fuente va de mayor a menor según su orden jerárquico, sin que exista en la plantilla CSS que especifique su presentación, aunque, podemos manipularla usando un poco de CSS.



Veamos entonces cómo personalizar los encabezados de nuestros posts, para que puedan destacar aún más, sean más atractivos y también más sencillo que tus usuarios accedan al contenido que les interesa, ya que podrán identificar fácilmente las distintas secciones que comprendería el post.

Agregar encabezados en el post

Desde el panel de edición de entradas podemos agregar fácilmente 3 distintos encabezados:



1) "h2" denominado por Blogger "Encabezado",

2) "h3" denominado "Subencabezado", y

3) "h4" denominado "Encabezado secundario".

Para agregarlos a los títulos de los distintos apartados o secciones de los posts, sólo tenemos que seleccionar el texto con el mouse, y luego aplicamos el encabezado eligiéndolo en las opciones del menú desplegable del panel, que puede apreciarse en la siguiente imagen:

Hecho lo anterior, se habrá agregado la etiqueta del encabezado respectivamente, y puedes verla si vas al HTML de la entrada, haciendo click en el botón que dice "HTML", a un lado de Redactar.

Personalizar los encabezados creando bloques con color de fondo (ejemplo sencillo)

Ejemplo. En este caso lo que haremos, es crear un bloque que abarcará casi por completo el ancho de la sección del post, y tendrá un color de fondo. Puedes agregar bordes si quieres y cualquier otra cosa que se te ocurra y puedas hacer.



Pasos

Paso 1. Estando en el panel de Blogger, vas a Plantilla > Personalizar >Avanzado, y selecciona la opción "Añadir CSS".

Paso 2. Ahí en el cuadro, agregarás el CSS para los encabezados, y estos son los estilos básicos para lograr el bloque en el subencabezado o etiqueta <h3>

.post-body h3{

display: block;

width:100%;

padding: 2px 4px;

background: #dedede;

}

El resultado sería algo como esto, y será aplicado a todos los "subencabezados"

Para el Encabezado secundario <h4>, sería así:

.post-body h4 {

display: block;

width:100%;

padding: 2px 4px;

background: #dedede;

}

Si te fijas en los dos casos anteriores, sólo hemos cambiado la etiqueta h3, por h4, si quisiéramos aplicar esos estilos al encabezado h2, entonces quedaría así: ".post-body h2".



Paso 3. Una vez que edites los valores y logres los resultados que buscas, guardas los cambios en "Aplicar al blog".

Cómo editar los valores (lo básico)

En width (100%) definimos el ancho que abarcará por completo el area de los posts. Dependiendo del diseño, podría ser necesario disminuir un poco este valor, como a un 98%, para que sea un poco más angosto y no se desborde.



En padding, separamos el texto de los limites del bloque, es decir, hacemos que el texto no quede "pegado" a los bordes. Se lee arriba y abajo (2px), derecha e izquierda (4px)



En background: definimos el color de fondo (#dedede) , y puedes cambiarlo, consultando esta tabla de colores. Si quisiéramos usar una imagen de fondo que se repita horizontalmente, entonces el fondo lo definiriamos así:

background: url(URL_de_la_ imagen) repeat-x left top;

Si quisieras poner un color de fuente diferente, entonces usarías la propiedad "color":

color: #0c0c0c;

Si quisieras agregar bordes, usarías la propiedad "borde":

 border: 1px solid #d7d7d7;

Del modo anterior, se aplicaría el borde en los cuatro lados (arriba, abajo, derecha e izquierda) sería 1 pixel de grueso, y de color gris (#d7d7d7). Si quisieras aplicarlo sólo en algunos de los lados, tendrías que definirlo de forma separada:



A la izquierda:   border-left: 2px solid #d8d8d8;

A la derecha:     border-right: 2px solid #d8d8d8;

Arriba:              border-top: 2px solid #d8d8d8;

Abajo:               border-bottom: 2px solid #d8d8d8;

• Para cambiar el grosor, editas el valor de los pixeles (2px). Ejemplo 4px.


• Para cambiar el tipo de borde, editas "solid". Puedes usar "dashed" para borde discontinuo, o "dotted" para borde punteado.


• Para cambiar el color del borde, editas el valor de "color" (#d8d8d8), consultando una tabla de códigos de colores, arriba puse un enlace.

Si quisiéramos manipular el tamaño de la fuente, entonces usaríamos la propiedad font-size:

Ejemplo: font-size: 16px;

Otras notas para la personalización de los encabezados 

Posibilidades para la personalización hay tantas, como imaginación y creatividad tengamos, claro que también hay que conocer qué propiedades podemos usar para obtener los resultados que queramos, pero investigando un poco, podemos lograrlo.



También, existen a nuestro alcance una cantidad extensa de generadores que pueden hacer las cosas más sencillas. Por ejemplo, el generador de CSS3 que podemos usar para crear fondos gradientes, esquinas redondeadas, sombras, etc.

El orden de los encabezados en los posts de Blogger

Las plantillas de Blogger, utilizan encabezado h3 para el título del post. En el siguiente post veremos como cambiar esa etiqueta por la etiqueta h2. De ese modo se podrán seguir usando encabezados h2, h3, h4, siguiendo un orden jerárquico de mayor a menor, y le daremos una mayor relevancia al título del post.

Recuerda, como lo mencionábamos en el post de referencia arriba, no es bueno brincarse el orden de los encabezados en una página.

Espero sea útil, cualquier cosa no dudes en comentarla. Hasta la próxima ;)