Hi there! El día de hoy les traigo un tutorial bien sencillo (según yo) para aprender a modificar el aspecto de los títulos de nuestras entradas y secciones de nuestro blog. Tal vez les suene medio absurdo, pero créanme que yo me he divertido mucho con esto.

Primero que nada, estos códigos deben funcionar para casi cualquier tipo de blog (en blogger al menos). Si no funciona es debido a que tenemos una plantilla de fuera que hemos instalado, pero igualmente te ayudaré a saber cómo modificarla.

Para esto, les voy a explicar un poquitín de 'teoría' para que entiendan qué están haciendo y puedan modificarlo totalmente a su gusto, que no se limiten a los códigos que les doy pues.

TEORÍA

Lo más básico que debemos saber es que en nuestro blog hay dos principales tipos de texto que a su vez se dividen en subtipos:

En esta ocasión, nosotros simplemente estaremos modificando los encabezados, que en HTML se abrevian como h y comúnmente los veremos entre los símbolos < h >.

Parte uno de la teoría acabada, ¡¡¡yey!!!

Vamos ahora a la parte dos. Les voy a mostrar una tablita que les será de mucha ayuda al momento de estar editando sus elementos (en este caso el Header). No se preocupen, la tablita no se la tienen que aprender de memoria, además creo que es bastante lógica.



Esta tablita nos indica, por colores, las partes de nuestro elemento. Les dejo un ejemplo de como se ve en cada color uno de mis títulos del costado del blog.



Muy bien, ya que tenemos estos elementos ahora sigue aprender un poco de los estilos (el CSS).

Los estilos que comúnmente utilizaremos son los siguientes:

color lo utilizaremos para el color de la fuente. Los colores se manejan en hexadecimales. Puedes encontrar una guía aquí.
background-color  lo utilizaremos para colores de fondo.
text-align alineación del texto.
letter-spacing separación entre las letras del texto.
border borde o lineas alrededor de nuestro elemento.

Explicaré mas a detalle esto de los bordes, ya que puedes elegir entre diferentes estilos de línea, así como su grosor y su color.

El apartado de border lo podemos partir dependiendo de donde se quiera la línea:
border linea en todos los lados (arriba, abajo, derecha e izquierda)
border-top  línea arriba.
border-bottom línea abajo.
border-right línea derecha.
border-left línea izquierda

Por último, les mostraré como se escribe el código para dar formato a la línea:

 Consiste en 3 especificaciones: Primero debemos poner el grosor de línea que queremos, después el tipo de línea y, por último, el color deseado de la línea.

Los tipos de línea que puedes poner son los siguientes:



Estas son las bases para poder cambiar nuestro código de estilos. Espero no haberles revuelto mucho. Ahora si, ¡a dar formato!

MANOS A LA OBRA

Para saber con cual Header queremos trabajar utilizaremos una opción que se llama Inspector de Elementos (yo lo utilizo en Chrome, desconozco si se puede utilizar en otro navegador).

1. Para utilizarlo hay que seleccionar el encabezado que queremos cambiar y dar Click derecho en el mouse.

2. Seleccionamos la opción de Inspect o Inspeccionar Elementos.



3. En esta parte nos mostrará el código del blog. Debe estar seleccionado el hx más cercano. En este caso es h3. Vamos a notar que cuando ponemos el mouse o hacemos clic sobre el código, (3.1) el título se iluminará de los colores mencionados anteriormente en el cuadrito.

4. En esta parte, nos muestra los códigos del estilo que lleva actualmente nuestro h.



5.  He agregado algunos de los códigos que mencioné anteriormente para cambiar el estilo del encabezado de las entradas:
text-align: center; para centrar el título
padding-bottom: 8px; para dar espacio entre el texto y la línea.
border-bottom: 1px dashed #969696; agregué una linea punteada abajo de 1px de grueso en color gris
letter-spacing: 7px; separé un poco las letras del título.

y ahora el antes y el después:

COPY + PASTE

Una vez que tenemos ya el diseño que queremos lo que vamos a hacer es copiar y pegar el código nuevo. No olvides por favor primero que nada salvar tu plantilla.

6. Asegúrate de tener abiertas dos pestañas, la de tu blog que estas editando y el editor de plantilla de tu blog ( Blogger Dashboard ⇾ Plantilla ⇾ Editar HTML ). Si aun no estas familiarizada con estos términos, te recomiendo leer esta entrada: Knowing your blog.

7. Copia el título del elemento que estamos editando (lo que está antes de los corchetes).



8. Dentro de la hoja de edición HTML vamos a dar Ctrl + F (Ctrl + B si tu navegador está en español) y vamos a pegar el título de nuestro elemento.

9. Se iluminará de forma amarilla dentro del código.

10. Volveremos a la página donde abrimos el inspector de elementos y copiaremos todo el código de formato (lo que está entre corchetes)




11. Nuevamente en el editor HTML de blogger, vamos a seleccionar todo lo que está entre los corchetes y lo vamos a reemplazar por el nuevo código que copiamos.







12. El código debe verse así.

13. Es muy importante que verifiquen que tenga un corchete al principio y al final de los códigos (color verde).

14. Finalmente damos clic en guardar plantilla y ya tenemos nuestro nuevo formato.

Al principio puede sonar difícil y laborioso, pero créanme si comienzan a experimentar y practicar, con el tiempo les resultará de lo más sencillo del mundo. Como recomendación, siempre tengan un blog extra de prueba, en este podemos hacer todos los cambios provisionales y ya cuando nos gusta el resultado lo pasamos al blog original.

Espero que este tutorial les haya sido de ayuda y cada día estén más cerca de tener su blog como lo imaginan.