Personalizar títulos en Blogger

En este tutorial les enseñaré a personalizar los títulos de distintas secciones, ya sean de las entradas, gadgets, título del blog, etc.

Debemos saber bien que la estructura de un título será siempre de la siguiente forma:

<h2>Título ejemplo</h2>

El número del título varía según sección, ya que cada título deberá ser editado de forma diferente.

En el caso de algunos títulos, no será necesario trabajar directamente el título por su selector normal, ya que en Blogger títulos como los de las entradas contienen una clase.

El tutorial:

1: Personalizando el título de las entradas:

Antes de ]]></b:skin>, debemos añadir el siguiente código:

.entry-title {

acá irán los estilos de los títulos de las entradas;
}

Para personalizarlos debemos crear distintos atributos, veamos unos ejemplos:

.entry-title {

text-align:center; /*permite centrar los títulos*/
font-size:20px; /*tamaño de la fuente*/
padding:10px; /*Espaciados*/
line-height: 1.5em; /*Con esto arreglamos que los títulos largos se sobrepongan*/
}

Como los títulos de las entradas contienen enlaces, no es posible darles color de forma normal, por lo que es necesario crear otra síntaxis además de la anterior:

a.entry-title {

color:#2d2d2d; /*Color del enlace*/
}

Si esto no funciona para cambiar el color de los enlaces, podemos probar de la siguiente forma:

.post h3 a {

color:#2d2d2d; /*Color del enlace*/
}

 2: Personalizando los títulos de los gadgets:

Para el título de los gadgets es necesario crear la síntaxis de la siguiente forma:

.sidebar h2 {

atributos;
}

Veamos un ejemplo con algunos atributos creados:

.sidebar h2 {

color:#2d2d2d; /*Color del texto del título*/
background:#689a03; /*Color de fondo del título*/
width:300px; /*Ancho del título*/
padding:6px; /*Espaciados*/
text-align:right; /*Alineación a la derecha*/
border:2px solid #2d2d2d; /*Bordes*/
font-size:16px; /*Tamaño de la fuente*/
text-shadow:1px 1px 1px #2d2d2d; /*Sombras en el texto*/
}

El código también deberá ir antes de ]]></b:skin>.

3: Personalizando el título del blog:

La síntaxis para editar el título es la siguiente:

#header h1 {

atributos;
}
#header a {
atributos del enlace;
}

Al igual que en las entradas, contiene un enlace por lo que es  necesario crear la segunda (Está incluída en el código).

Este puede ser mas complicado que los otros 2 anteriores ya que es necesario definir mas atributos, como flotación, márgenes, tamaños, etc.

Veamos un ejemplo:

#header h1 {

font-size:40px; /*Tamaño del texto*/
float:left; /*Flotación a la derecha*/
padding:3px; /Espaciados*/
width:700px; /*Ancho de los títulos*/
overflow:hidden /*Si el texto es mas largo que el contenedor, no se sobrepondrá*/
}
#header a {
color:#2d2d2d;/*Color del enlace*/
}

Tutorial a petición de Enzo Sánchez.

Offtopic: Algunos usuarios me han dicho que no le he puesto la debida atención al blog, a todos ellos les pido disculpas pero han surgido inconvenientes y he tenido que antenderlos. Cualquier sugerencia u opiniones estaré dispuesto a escucharlas.

Saludos a todos.