PONER ICONOS DELANTE DEL TÍTULO DE LAS ENTRADAS.

Ahora toca tratar de explicaros una cosita que nuevamente me encontré en el BLOG DE GEMA mientras buscaba por allí la forma de poder ocultar parte del contenido de las columnas del blog (como por ejemplo el widget de comentarios o el de etiquetas, los cuales, en el momento consiga obtener os explicaré como llevarlo a cabo).

Este truco consiste en posibilitar la colocación de una pequeña imágen a la izquierda del título de nuestras entradas (podéis verla puesta en este mismo blog, un pequeño avatar con un dibujo y mi nombre debajo.

La tarea de añadir este icono me pareció sencilla y bastante entretenida, además de darnos la posibilidad de personalizar un poco más nuestro blog para que luzca todo lo bonito que cada uno de nosotros desearía.


Para colocar la imágen debemos irnos al apartado de edición html de nuestro blog y buscar el apartado de post en los códigos CSS, que debería aparecer de una forma similar a esta (ya sabéis que estas cosas cambian en función de la plantilla que tengáis).

Esto es sólo la parte que nos interesa de apartado posts:


h3.post-title, h4 {
  font: $(post.title.font);
  color: $(post.title.text.color);
}

h3.post-title a {
  font: $(post.title.font);
  color: $(post.title.text.color);
}

h3.post-title a:hover {
  color: $(link.hover.color);
  text-decoration: underline;
}

Para añadir el icono correspondiente solo tendremos que añadir al final de la parte del código señalada en verde lo siguiente (justo antes del símbolo }):

background: url(url del icono) no-repeat 0 .5em;
padding-left: 20px;

Acordados de sustituir la URL del icono por la url del que vosotros queráis poner.

Modificando el valor de padding-left establecemos la distancia entre el icono y el título.
Si queremos modificar la altura podemos aumentar o disminuir el valor de 0 .5 em

Bueno, pues con esto quedaría puesto el icono antes del título de vuestro blog. Espero que lo probéis y que os guste mucho. Recordad no poner imágenes demasiado grandes (la mía creo que tiene 50x50 px) y trabajar siempre haciendo una copia de la plantilla previamente y usando la herramienta de vista previa.

Cualquier duda o problema que os pueda surgir en la colocación de vuestro propios iconos podéis consultarmela sin ningún problema.