En esta clase vamos a personalizar títulos de las entradas de una forma sencilla pero original y diferente.
Personalmente no recomiendo poner imágenes en los títulos pero en este diseño en particular no me disgusta y he elegido un par de flores en tonos pastel acordes con la paleta que he escogido para el blog de pruebas que además tienen efecto acuarela.
En tu caso puedes elegir una imagen con el tamaño de la zona del título, como fondo de color, líneas, lunares, efecto acuarela, o lo que quieras, en vez de esta imagen. En próximos posts veremos más opciones para conseguir distintos efectos.
Si esto de tanto tutorial te hace perder mucho tiempo…
Es real, esto lleva tiempo. No solo cuando sale bien sino todo el tiempo perdido de esos tutoriales «fracaso» que al final no salen como queremos. Si te sientes frustrada y lo que quieres es emprender un negocio online a través de tus conocimientos y tu blog, ponte en contacto conmigo, pide la primera reunión gratuita o echa un ojo a nuestros servicios porque de esta manera sabrás en qué debes dedicar el tiempo para crear tu negocio rentable en menos de un año. En nuestra Academia Creactiva encontrarás formaciones avanzadas.
También puedes elegir una pequeña imagen, como un puntito, una estrella, un chupete, un icono que te guste, … cualquier imagen más o menos pequeña para acompañar al título del post como el que yo he elegido.
El problema de las imágenes es que en versión móvil te darán problemas.
Si no quieres ponerle la imagen también es muy válido, puedes jugar con las líneas, hacer un marco, tamaño de letra, color… cambiamos el resto de opciones para personalizarlo a nuestro gusto y listo! 🙂 Si quieres usar estas florecillas aquí te las dejo para descargar.
Descarga gráfico de flores para Personalizar títulos de las entradas
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(cuando no es enlace) .
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, lazona del título. En el vídeo te explico en un par de minutos estas diferencias por si te interesa.
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://3.bp.blogspot.com/-uXH7cqX5GMo/VwqitGeuz3I/AAAAAAAAACo/gO0h-AsGpAw8ojx5GCn-284CPS0Bbr6mQ/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 >>Tema >>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.
Si quieres saber más sobre cómo Personalizar títulos de las entradas con código tengo un post sobre cómo personalizar los títulos del sidebar que te ayudará mucho porque defino muchos conceptos de estilo para personalizar, en este caso, el título de post. Es un poco pesado en información en cuanto a código, pero si te gusta «fuchicar» y ya controlas un poquito te encantará.
Si te interesa puedes aprender cómo elegir una fuente que no nos proporcione Blogger.
Guardamos y listo!
Este ha sido el resultado de este tutorial y de estos códigos.
Vídeo tutorial paso a paso de apoyo
Quiero saber cómo te ha resultado, así que cuéntame aquí abajo, en comentarios, qué tal te ha ido.
En la próxima clase veremos cómo personalizar los títulos de la barra lateral del blog, donde tenemos los gadgets. No te lo pierdas 🙂
