SLIDER

¡Hola!

Mónica Lemos
¡Hola! Soy Mónicay quiero que empieces a crear tu blog o tu canal de youtube sin complicaciones. Aquí descubrirás cómo.
CONSEGUIR LO QUE QUIERES

NUNCA FUÉ TAN FÁCIL

Si quieres conseguir ciertos cambios en tu blog, renovar el diseño, arreglar algún problema, instalar alguna plantilla que te crea problemas...¡Puedo ayudarte! Envíame un e-mail a [email protected] y hablemos.

Suscríbete

¿Quieres asegurarte de que tus posts estén perfectos antes de ser publicados?
Te regalo una Check-List que te ayudará en esto.


Tutorial Blogger: Personalizar titulos de las entradas - C 8

Tutorial Blogger: Personalizar titulos de las entradas

En esta clase vamos a personalizar los 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.

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.

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 las florecillas para el título de tus entradas




DESCARGAR


empezamos la clase

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, la zona 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)


 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  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.

Si quieres saber más sobre cómo personalizar el título 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á

Más adelante y después del curso, veremos cómo elegir una fuente que no nos proporcione Blogger.

 Guardamos y listo!


así ha quedado en mi caso

Tutorial Blogger: personaliza titulo de las entradas

video tutorial




fin de la clase

¿Has visto qué fácil? Controlando un poquitín de código se hacen maravillas. No dejes de aprender porque te vendrá genial para mejorar tu blog y su diseño y además que ¡El saber no ocupa lugar!

Quiero saber cómo te ha resultado, así que cuéntame aquí abajo, en comentarios, qué tal te ha ido.

Cualquier duda ya sabes que puedes preguntarme lo que quieras y en cuanto pueda responderé a tus dudas.

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 :)





suscríbete para no perderte ni una! 


   

16 comentarios

  1. 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

    ResponderEliminar
    Respuestas
    1. Genial Sandra!! y yo que pensaba que a tu blog no le faltaba nada ;) Lo tienes muy cuco!! Siempre está genial seguir mejorándolo! :)
      Muack ¡¡

      Eliminar
  2. Me encanta este tutorial! Muchas gracias Mónica :)

    ResponderEliminar
    Respuestas
    1. Me alegro mucho!!gracias a ti por transmitirme tu satisfacción con mi trabajo! :D
      Muuaaaack

      Eliminar
  3. 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¡¡

    ResponderEliminar
    Respuestas
    1. Hola Melissa!!! pues síii, te ha quedado muy chulo!! Con el código poco tenéis que hacer, que intento que lo tengáis todo hecho ;)
      Gracias por comentar linda!
      :)

      Eliminar
  4. Genial como siempre si que me es de gran utilidad!

    ResponderEliminar
    Respuestas
    1. Hola Sofía,

      qué chulo te está quedando!! seguro que terminas manejando muy bien código!! :)

      Gracias!!
      Muack!!

      Eliminar
  5. 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... :*

    ResponderEliminar
    Respuestas
    1. 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 :)

      Eliminar
  6. Hola monica, awww gracias por este tutorial, llevaba mucho tiempo buscando algo asi<3

    ResponderEliminar
    Respuestas
    1. De nada maja!! me alegra mucho haberte ayudado :)

      Eliminar
  7. 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 :(

    ResponderEliminar
    Respuestas
    1. 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

      Eliminar
    2. Muchas gracias Moni, lo intentaré de nuevo :3

      Eliminar
  8. Hola! Muchas gracias por el tutorial. Tengo una pregunta, como haces que la línea que decora el título sea más corta?

    Saludos!!

    ResponderEliminar

© Blogger Paso a Paso • Theme by Maira G. Adaptada por Mónica Lemos, autora de este blog.
Todas las imágenes son del banco de imágenes Unsplash.com o bien de mi propia autoría.
Si quieres puedes reclamar tu autoría - Contactar con la autora del blog.