Cómo cambiar de color los enlaces del título de las entradas

martes, 16 de junio de 2015


Muy buenas artistas!! Hoy os tengo preparado otro tutorial cortito para tener el blog 100% personalizado a nuestro gusto :D


En esta ocasión veremos cómo personalizar los enlaces del título de las entradas. Como ya sabréis, existen dos tipos de títulos en los blogs:
  • Los que son un enlace: en la página principal de todo blog, los títulos de los posts son enlaces que nos llevan a la entrada del mismo.
  • Los que no son un enlace: Pero si entramos en este post, el título deja de ser un enlace, y se convierte en el título de la entrada sin más

¿Por qué os cuento esto? Pues porqué sabiendo esto, recomiendo que los enlaces de los títulos de las entradas los hagáis con la misma apariencia que los títulos a secas.

Es decir, si tienes los títulos de las entradas de color salmón, déjalos del mismo color cuando hacen la función de link. Así se verá todo más homogéneo. Lo que puedes cambiar es el color de cuando se pasa el ratón por encima, para incitar a que tus lectores hagan clic en él ;)



#1 Encontrar el código CSS para cambiar la apariencia del título de las entradas a secas:

Para encontrar el código relacionado con los títulos de las entradas nos vamos a Plantilla ➡ Editar HTML y buscáis: h3.post-title

Os enseño cómo tengo el código CSS para que lo veáis en la práctica. Éste es el código que tengo yo del título a secas. Podéis añadir o modificar las líneas de código que he puesto aquí para customizar vuestros títulos. En cada línia he escrito lo que se modifica:

h3.post-title, h3{
  color: #666666; /*Color del título*/
  text-align: center; /*Alineación del título, aquí está centrado*/
  border-bottom: 2px dashed #27a7b1; /*Línea inferior, aquí es una línea discontínua azul*/
  font: normal normal 20px Arial; /*Tamaño y tipografía*/
  margin: .75em 0 0;
  line-height: 1.6;
  text-transform: uppercase;/*Para que sea en mayúsculas, si lo queréis en minúsculas quitad esta línea*/

IMPORTANTE: Para el diseño que tengo yo he tenido que borrar la a de h3.post-title, h3 a{ porque sinó la línea discontínua que tengo debajo del título se me veía duplicada cuando se veía como enlace. Si tus títulos no tienen líneas ni arriba ni abajo no hace falta que borres la a.

#2 Añade el código CSS referente a los enlaces de los títulos:

Y justo debajo tengo el siguiente código CSS para los títulos que son enlaces. Añade este trozo de código para modificar la apariencia de los links en los títulos de las entradas, y cambia los valores en azul por los que quieras:

h3.post-title, h3 a{
  color: #666666; /*Color del enlace del título*/
  text-decoration: none;}/*Sin decoración, para que sea igual que el título a secas*/

h3.post-title, h3 a:visited{
  color: #666666;/*Color del enlace del título visitado*/
  text-decoration: none;}/*Sin decoración, para que sea igual que el título a secas*/

h3.post-title, h3 a:hover{
  color: #ffcc66;/*Color del enlace del título al pasar el ratón por encima*/
  text-decoration: none;}/*Sin decoración, para que sea igual que el título a secas*/


IMPORTANTE: Si no has borrado la a del cacho de código del paso #1, no hace falta que insertes las tres primeras líneas de código del paso #2.

Si queréis modificar el resto de los enlaces de tu blog échale un ojo a este otro tutorial.

Y eso ha sido todo por hoy, en el próximo tutorial explicaré cómo modificar solo la apariencia de los enlaces de las entradas.

Un beso enorme artistas!!

Laia

1 comentario:

  1. Muchas gracias! Me ha servido de mucho =) Pero tengo una duda, eso de decoración qué es? Se le podría poner alguna decoración=

    ResponderEliminar