Añade un icono al título de tus posts y conseguirás que sean más atractivos

6.4.16

poner iconos titulo post

Sé que te gustan los iconos y los dibujitos, y más aún cuando están en tu blog.

Te gusta sorprender a tus lectores y hacer que sonrían.

¿Has pensado alguna vez en añadir uno (o dos) iconos a los título de tus entradas, de manera automática?

Ahora es el momento de pensar en ello.



Lo primero que necesitas

Puede parecerte obvio, pero para ponder añadir un icono (o dos) en los títulos de tus posts automáticamente, lo primero que tienes que hacer es descargarte un icono.

Aquí tienes una página con miles de iconos, entre los cuáles seguro que encontrarás el que más te guste. Además puedes escoger el color que quede mejor con el diseño de tu blog.

Recuerda que el icono lo tienes que descargar con la medida correcta. Las medidas dependen del tamaño de fuente que hayas escogido para tus títulos, pero normalmente está alrededor de los 20px.

Te recomiendo que te descargues un par de iconos y que pruebes el que mejor queda.


El código que tendrás que añadir

Ya verás que este post tiene muchos apartados, para que puedas escoger exactamente dónde quieres poner el icono en el título de los post.


 Tendrás que seguir las siguientes instrucciones:
  1. Escoge el código que más se acerque a tu idea.
  2. Entra en Plantilla del menú lateral izquierdo.

    decorar titulo post
  3. Pinchar en Personalizar.
    poner icono titulo
  4. Pegar el código en el recuadro blanco de Avanzado --> Añadir CSS.

    titulo post con icono



Cómo añadir un icono delante del título del post, si sólo tiene una línea

Aquí tienes un ejemplo para ver cómo te quedará.

titulo post icono

En el caso de que tu título sólo tenga una linea tendrás que utilizar este código:


  .post-title {
    background: url(URL_ICONO) no-repeat left transparent;
    padding-left: 15px;
  }

  • URL_ICONO --> tienes que poner la URL del icono que te hayas descargado.
  • el padding es el espacio que queda delante del título. Tienes que adaptarlo para que tu título no quede encima del icono.

Cómo añadir un icono delante del título, si tiene más de una línea

Así quedará el icono si tu título es muy largo.

titulo post icono delante





En el caso de que tu título sea muy largo y ocupe más de una línea, tendrás que utilizar este código:



  .post-title:before {
    content: url(URL_ICONO);
  }

  • URL_ICONO --> tienes que poner la URL del icono que te hayas descargado.

Cómo añadir un icono delante y otro detrás del título de la entrada

A mi en particular me encanta esta opción. A lo mejor es cosa de la simetría!
icono delante detras titulo

Si quieres añadir dos iconos, uno delante y otro detrás del título, tendrás que utilizar este código:



  .post-title:before,

  .post-title:after {
    content: url(URL_ICONO);
  }

  • URL_ICONO --> tienes que poner la URL del icono que te hayas descargado.


Cómo añadir un icono encima del título

Esta opción también es muy válida y original.


icono encima titulo' title=


Si quieres probar esta opción tan original, debes utilizar este código


  .post-outer:before 
{
    content: url(URL_ICONO);
  }
  • URL_ICONO --> tienes que poner la URL del icono que te hayas descargado.


Cómo añadir un icono encima del título centrado

    En el caso de que el título de la entrada lo tengas centrado, también querrás centrar el icono, encima del título. Así quedará mucho mejor, todo centrado.
    entrada icono encima


    Para centrar el icono encima del título del post, tienes que utilizar este código:


      .post-outer:before 
    {
        content: url(URL_ICONO);
        display: block;
        width: ANCHO_ICONO_PIXELES;
        margin: 0 auto;
      }
    • URL_ICONO --> tienes que poner la URL del icono que te hayas descargado.
    • ANCHO_ICONO_PIXELES --> es el número de píxeles que ocupa tu icono de ancho.



    Es increíble la cantidad de opciones que hay, ¿verdad? Hay para todos los gustos!


    ¿Te animas a poner un icono con el título de tus posts? ¿Qué icono pondrías? Nos leemos 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.