Cómo cambiar el color de fondo del título de las entradas, con o sin pasarle el ratón por encima

2.11.16


Si quieres resaltar el título de tus posts, pero no te parece suficiente o adecuado modificar sólo el color del título de la entrada, lo que puedes hacer es darle un poco de vida colorida al fondo.

Puede ser que ahora mismo quieras cambiar el color de fondo de los títulos de las entradas porqué te gusta un color determinado, pero que dentro de unos meses (o años, que esto de los blogs no se termina nunca) quieras cambiar el color otra vez.

Es por esto que aprenderás a ponerlo en el diseñador de plantillas para que la próxima vez te sea más fácil de modificar, sin que tengas que añadir más código otra vez más adelante!

Ahora mismo si miras en el "Diseñador de plantillas de Blogger" (que está en Plantilla --> Personalizar) verás que sólo tienes una opción para personalizar el título de las entradas, la de cambiar la fuente del título.



Lo que vas a hacer ahora será añadir dos opciones más en el menú Avanzado, que te permitirán cambiar el color de fondo del título y el mismo color cuando tus lectores le pasen el ratón por encima.


Tutorial para añadir la opción de cambiar el color de fondo

  1. Entra en "Plantilla" del menú lateral izquierdo de Blogger.

  2. Escoge la opción Editar HTML, para acceder a la plantilla HTML del diseño de tu blog.

  3. Pincha en el recuadro del código y seguidamente con Ctrl + f (o Command + f si estás en Mac) te aparecerá el buscador para el código.

  4. Escribe <b:skin> y dale a Enter (Intro o Return).

  5. En tu código habrás encontrado lo que buscabas.

    En el caso de que esté el código contraído, tendrás que pinchar encima de la flecha negra que aparece al lado de los números, así se te desplegarán unas líneas de código.




  6. Justo debajo de

    /* Variable definitions
       ====================

    tienes que pegar el siguiente código



    <Group description="Color fondo título entrada" selector="h3.post-title">

         <Variable name="post.title.bg.color" description="Color Fondo Título " type="color" default="#222222" value="#fff2cc"/>

       </Group>

    <Group description="Color pasar por encima fondo título entrada" selector="h3.post-title:hover">

         <Variable name="post.title.bg.hover.color" description="Color de fondo al pasar por encima del título entrada" type="color" default="#222222" value="#d9d2e9"/>

       </Group>
         

    La primera parte de este código hace referencia al color de fondo del título de la entrada y la segunda parte al mismo color de fondo, pero cuando le pasas el ratón por encima.
  7. Ahora debes abrir otra vez el buscador y buscar este código  ]]></b:skin>(lo de buscar en el código son los pasos del 3 al 5, por si no sabes cómo se hace).
  8. Ahora debes pegar el siguiente código justo encima (fíjate bien en todos los símbolos de lo que has buscado!!)



       h3.post-title {
          background:$(post.title.bg.color);
          padding:10px;
       }

      h3.post-title:hover {
          background:$(post.title.bg.hover.color);
          padding:10px;
       }


Si ves que hay demasiado espacios en color alrededor del título, o para tu gusto demasiado poco, lo puedes solucionar cambiando simplemente el valor de padding (que ahora son 10px), por otro valor adecuado para tus títulos.


Los resultados del cambio hecho en el código

Ahora que ya has modificado el código HTML de la plantilla de diseño de Blogger, ya puedes ver los cambios que has realizado en el "Diseñador de plantillas  de Blogger" (entra en Plantilla --> Personalizar del menú lateral de Blogger.)

Dentro del apartado Avanzado ahora tienes dos nuevas opciones:




Si quieres cambiar el color de fondo del título de las entradas, sólo tienes que pinchar en el color que más te guste.

Antes de finalizar tienes que guardar los cambios (con el botón de arriba a la derecha).




Ahora para comprobar cómo queda sólo hace falta que vayas a tu blog y mires los títulos de las entradas y que le pases también el ratón por encima, así comprobarás cómo queda y si te gusta los cambios realizados :-)

Aquí te dejo un simple ejemplo que he creado (es el mismo título con o sin pasarle el ratón por encima).







Ya ves que decorar el blog y llenarlo de color, vida y estilo no es nada difícil.

Si tienes alguna duda me puedes contactar con los comentarios.

¿Habías visto antes los títulos de los posts con colores de fondo? ¿Piensas que es una buena idea para tu blog? ¿Te atreves a probarlo?

¡Te leo en los comentarios!

Laura


¿Te ha servido lo que has leído?

Muchas gracias por compartirlo en tus redes sociales!
Tus contactos y yo te lo agradeceremos! :-)


¿Quieres contenido exclusivo para mejorar tu blog?
Suscríbete y recibirás AHORA la guía para dominar Blogger HOY!
Tu blog no pasará inadvertido.
Dejará huella.