Poner un Enlace al titulo de Las Entradas

Poner un titulo de las Entradas personalizado.

Para este caso vamos a aprender cómo podemos personalizar por separado el título cuando está en la página principal y funciona como enlace y cuando está en la página del propio post

Lo primero que debemos tener en cuenta es que vamos a modificar el título y también la etiqueta h3 que es la que contiene el título de los posts

o lo que quiere decir, la zona del título.

Además también vamos a personalizar el estilo de nuestro título cuando el ratón se sitúe encima. (códigos protagonistas de este detalle: h3:hover y a:hover)

Vamos a Plantilla

Hacemos Copia de Seguridad

Editar HTML

y buscamos el siguiente código (para que salga la caja de Search: tenemos que pulsar CTRL+F dentro del cuadro de texto HTML)

h3.post-title

Le damos 2 veces a enter, o lo que viene siendo que nos interesa el segundo código que nos marca en amarillo.

Si llevas este curso al pié de la letra tendrá que aparecerte este:

h3.post-title, .comments h4 { font: $(post.title.font); margin: .75em 0 0;}

Justo despues de este anterior código, pegamos el siguiente con sus respectivos cambios que prefieras:

h3 {/*Zona del título de post*/
background: no-repeat url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihHVYpyEUHdl9GsK_A2j-iC3zRy2wt9O5JSSQGoVylxOkfXHUF-Db1ns_IDcfeB0hFcfnFtpl4z5lVrqJPCI6z3276nre_b_n43h-NR8vWdTetf1aKCJQryrRweuyUdza3MEtUjKOI9K8/s1600/post-titulo.png"); /*Imagen de fondo*/
text-align: right; /*Alineación de la imagen, posición, left sería izquierda y center en el centro*/
border-bottom: 2px solid #666666; /*Para poner línea debajo del título*/
}
h3:hover{
border-bottom: 2px solid #8fb59e;
}
h3.post-title {/*Título del post sin enlace*/
text-align:center; /*Alineación del texto, posición*/
font-family: 'Copse'; /*Tipografía de texto*/
font-size:15px; /*Tamaño de texto*/
color: #666666; /*Color de texto*/
text-transform: uppercase; /*Texto en mayúscula*/
letter-spacing: 3px; /*Espacio entre letras*/
padding:15px; /*Espacio alrededor*/
}
h3.post-title a{ /*Título del post con enlace*/
font-family: 'Copse';
font-size:15px;
color: #666666;
text-transform: uppercase;
letter-spacing: 3px;
padding:15px;
}
h3.post-title a:hover{ /*Título del post con enlace al pasar el ratón por encima*/
font-family: 'Copse';
font-size:15px;
color: #8fb59e;
text-transform: uppercase;
letter-spacing: 3px;
padding:15px;
}

Los colores , que están en negrita, los cambias por los de tu paleta de colores. El tipo de letra puedes escogerlo desde Diseño Personalización Avanzado Título de la entrada y ver qué opciones tienes. Eliges el nombre de la Fuente que quieres y la escribes entre las comillas en el apartado Font-family: y el resto de estilos te los he definido entre /* y */ para que, si quieres, vayas probando dándole a Vista Previa desde la plantilla los diferentes estilos.

El código de imagen también está en negrita y sería lo que tendríais que cambiar. En el vídeo te explico todo paso a paso. Además explico pequeños conceptos sobre código HTML/CSS que te servirán para entender tu plantilla y mejorar tu personalización.