tutorial blogger personaliza titulos de entradas blogger

Personalizar títulos de las entradas – tutorial Blogger

Tutorial Blogger: Personalizar titulos de las entradas

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ítuloEn 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)

  1.  Vamos a Plantilla
  2.  Hacemos Copia de Seguridad
  3.  Editar HTML
  4.  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.

Tutorial Blogger: personaliza titulo de las entradas

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 🙂      

Comparte

CONSIGUE

LA VIDA QUE DESEAS

GRACIAS A UN NEGOCIO ONLINE RENTABLE

Disfruta de mi curso gratuito “Cómo tener un Negocio Online Rentable no solo económicamente”, en el que comparto las áreas más importantes a trabajar para conseguir la vida que deseas con tu Emprendimiento Online.

Interacciones con los lectores

20 comentarios

  1. Sandra M

    Hola!!
    Pues tengo modificados mis títulos, pero las flores me han gustado, así que me las llevo, y también lo del hover en la barra, que eso no sabía hacerlo! ;D
    Gracias guapa.
    Besos <33

  2. Melissa Ramirez

    Hola¡, me ha tomado algo de trabajo pero puedes pasarte a ver como quedaron¡ no quise modificar mucho, bueno, solo modifique la imagen del post, por que no soy muy buena con codigos, pero me ha quedado re lindo. Mil gracias¡¡

  3. Amigurumis Alas de Hada

    hola Mónica, estoy haciendo el nuevo blog, siguiendo tus instrucciones, y me encanta.. .queda precioso…. si bien, me encontré un pequeño inconveniente, al incorporar la florecita, en la vista del Mobil, se monta la imagen con el titulo… como podria solucionarlo porfi.
    Mil gracias por este curso, ahora mis blogs, tendran apariencia divina… :*

    • Mónica Lemos

      Hola!!! encantada de poder ayudarte!

      esta plantilla NO es responsive, con lo cual, en la versión móbil no tiene porqué salir bien… es un curso básico. Espero en algún momento poder compartir cómo hacerlo responsive.

      Si tienes problemas en la vista normal de PC me avisas 🙂

  4. Daniela

    Hola Monica, me ha encantado este tutorial, hermoso tu trabajo
    Tengo una duda, verás seguí todos los pasos pero borré un poquito de código que no usaría y ahora al titulo se le ha puesto doble raya, no sé como quitar ese error 🙁

    • Mónica Lemos

      Hola Daniela,
      Si has hecho antes una copia de seguridad como siempre recomiendo solo tienes que reestablecerla.
      Si no, borra toda esa parte de código que personaliza el título y pon otro… Es que otra cosa no te puedo decir… Hay que tener cuidado con lo que se borra y lo que se añade… Intenta localizar lo que falta o lo que está diferente..

      Suerte! Y ánimo 🙂
      Espero haberte ayudado

  5. Arleth In Vitanza Espinoza

    Infinitas gracias por compartir tu sabiduría!!! Qué crack eres!!!
    Realmente, lo que andaba buscando era cómo quitarle las mayúsculas a los títulos de las entradas …y tus "florecillas" me llevaron al apartado de códigos donde debía hacer la movida para lograr la magia.
    Vaya un fortísimo abrazo!!!
    (;D)

Deja tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *