6 de octubre de 2016

Tutorial: Personalizar los Encabezados o Headings de los Posts

Feliz Jueves, ya pronto comenzara el fin de semana, por lo que se me ocurrió traerles un nuevo y divertido tutorial.. Esta vez les enseñare un poco sobre los ENCABEZADOS, los cuales son muy fáciles de personalizar pero no muchos blogs lo utilizan, espero una vez terminen de leer algunas "Preguntas frecuentes" se atrevan a probarlos. Comencemos!

Preguntas frecuentes

  • ¿Qué son los encabezados?
Los encabezados (en inglés: headings), son los títulos de las secciones o párrafos de una página
Para definir los encabezados, se utilizan las etiquetas h1, h2, h3, h4, h5, h6.
En el código HTML se puede definir hasta 9 niveles de headers. Sin embargo, la mayoría de navegadores distinguen sólo 6 niveles. Los primeros 3 (H1, H2, H3) tienen la mayor importancia para los buscadores.

Blogger incorporó en el panel de edición de entradas las etiquetas h2, h3, y h4 a las que llama respectivamente así:
   ▸Encabezado = h2
   ▸Subencabezado= h3
   ▸Encabezado secundario = h4


  • ¿Para que sirven los encabezados?
Los encabezados suelen darle una muy buena presentación a tus post, además de que sirven para poder separar una sección de otra o resaltar un texto muy importante.  También incluyendo palabras clave en los headers podemos aumentar la relevancia de nuestra página a los resultados de búsqueda por una u otra palabra clave.
  • ¿Cómo agregar o poner los encabezados en las entradas?
Para poner un encabezado en una entrada, tienes que seleccionar el texto que quieras destacar usando el botón izquierdo del ratón, luego, desplegar las opciones del menú que aparece en el panel de edición de entradas de Blogger y seleccionar el encabezado que desees. La etiqueta se agrega automáticamente al texto.
[Ejemplo en un blog de pruebas]  Los encabezados están sin modificar, o sea, tal y como esta estipulado en una de una plantilla simple que blogger ofrece.
En algunas plantillas -predeterminadas de blogger- el Encabezado (h2) se define de acuerdo al los parámetros estipulados para los Títulos de los post. Razón por la cual esa sección solo se debe modificar si eres experto en HTML y directamente desde el código madre de la plantilla para no tener ningún tipo de dificultad. De igual manera yo siempre recomiendo utilizar el Subencabezado y Encabezado secundario para los post (aka : ¿Para que sirven los encabezados? ▲).

Personalizar los encabezados

  • Dirígete a Plantilla ▸ Personalizar ▸ Avanzado ▸ Añadir CSS.
Ahí, agregarás el CSS para los encabezados. Ejemplos:

Subencabezado

.post-body h3{
display: block;
width:100%;
font: normal normal 28px Cuprum;
padding: 2px 4px;color: #99e166;
text-shadow: 1px 1px #000;
text-transform: uppercase;
border-top: 1px dashed #ccc;
border-bottom: 1px dashed #ccc;
}

Encabezado secundario

.post-body h4{
display: block;
width:100%;
padding: 2px 4px;
font: normal normal 25px Dancing Script;
color: #7c231a;
}
Entendiendo los códigos:
  1. width: Se define el ancho que abarcará por completo el área de los posts. Dependiendo del diseño, podría ser necesario disminuir un poco este valor.
  2. font: definimos el tamaño y el tipo de letra del encabezado.
  3. padding: separación del texto con 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)
  4. color: hace referencia al color del texto. Se utiliza el sistema hexadecimal de colores.
  5. text-shadow: En la sombra alrededor de las letras del título, si no quieres esta opción cambia el 1 por 0, y si quieres más sombra aumenta el número, puedes cambiar el color de la sombra utilizando el sistema hexadecimal de colores.
  6. text-transform: Trasformación del texto, en este caso (uppercase) hará que el texto aparezca en mayúsculas.
Otras características:
  1. background [ejemplo: background: #ccc;]: Se define el color de fondo. Puedes cambiarlo, consultando la tabla de colores html
  2. Si quisiéramos usar una imagen de fondo que se repita horizontalmente, entonces el fondo lo definiríamos así: background: url(URL_de_la_ imagen) repeat-x left top;
  3. Si quisieras agregar bordes, usarías la propiedad "border": border: 1px solid #ccc; 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;

Una vez  editado los valores y logres el resultado deseado, guarda los cambios ["Aplicar al blog"].

Resultado:



[Ejemplo en un blog de pruebas]
PD: Para centrar los encabezados utiliza el panel de edición de entradas de Blogger. 

Muy muy sencillo, y le da un aspecto más organizado al blog. En todos mis diseños y las plantillas pre diseñadas que ofrezco, siempre personalizo los encabezados... Si tienes un blog de reseñas o críticas, con los encabezados podrás resaltar frases importantes del post.

Espero les guste este tutorial y se atrevan a jugar con los Headings. Hasta la próxima. 

No hay comentarios:

Publicar un comentario