Cómo cambiar el color de los enlaces del blog

martes, 16 de junio de 2015


Hola artistas! Preparados para la llegada del veranito?? Como hace calor y esas cosas hoy toca un tutorial de los cortitos... qué lujo eh? ;p

Veremos cómo cambiar el color de los enlaces en nuestro blog modificando la plantilla de blogger. A mi me gusta tocar el código directamente en la plantilla HTML, en vez de usar la herramienta Diseño que nos proporciona blogger.

Así que os lo explicaré paso a paso para que os salga en un plís :)


Pero antes me gustaría comentaros algo acerca de los colores en el diseño web. La gente está muy acostumbrada a que el color de los links sea el azul, así que si usas un tono de ese color al visitante de tu web le resultará más fácil identificarlo como enlace que con cualquier otro color.

Pero si el azul no pega nada con el diseño de tu blog o web y quieres marcar la diferencia con un color distinto, también lo puedes hacer, por supuesto.

Dicho esto, empezamos con el tutorial para cambiar el color de los enlaces en la plantilla blogger!!


CÓMO CAMBIAR EL COLOR DE LOS ENLACES DEL BLOG

#1 Buscamos el código CSS

Nos vamos a Plantilla ➡ Editar HTMLDentro del recuadro de código debes pulsar CTRL+F (en caso de que tengas Windows) o CMD + F (en caso de que tengas un Mac) para que se te abra el buscador. En él buscamos: a:link {  y encontraremos algo así:



#2 Cambiamos la apariencia de los links con código CSS

Las posibilidades son infinitas. Si modificáis el código podéis ponerlos del color que os guste, con subrayado o sin subrayado, en negrita o hasta dónde la imaginación os alcance.

Veamos cómo se cambia la aparencia de los enlaces:

a:link {
  text-decoration: none; /*para que el texto no tenga decoración*/
  color: #3d85c6; /*color del enlace, aquí en azul*/
}

a:visited {
  text-decoration: none; /*para que el enlace del texto visitado no tenga decoración*/
  color: #acacac; /*color del enlace visitado, aquí en gris*/
}

a:hover {
  text-decoration: underline; /*para que aparezca una línea debajo del texto al pasar el ratón por encima*/
  color: #acacac; /*color del enlace al pasar el ratón por encima, aquí en gris*/
}

Ahora ya sabéis cómo se cambia la apariencia de los links en blogger. Pero tened en cuenta que este cambio afectará a todos los links del blog, es decir: los de las entradas, los del sidebar, los de los menús y los de los títulos de los posts.

Si os interesa cambiar SOLO los enlaces de una parte específica del blog, podéis mirar estos otros tutoriales: Cómo cambiar el color de los enlaces del título de las entradas y Cómo cambiar el color de los enlaces del texto de una entrada.

Espero que os haya gustado el tutorial!! Intento alternar tutoriales básicos con tutoriales más complejos, para que dispongáis de toda la información posible para customizar vuestros blogs :)

Un abrazo estrujador y nos leemos, artistas!

Laia

4 comentarios:

  1. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  2. Todos dicen que busque esa palabra de a:link o los otros, pero al crear un entrada vacia y poner solo una palabra enlazada a un link me sale:_

    aaaaaaaaaaaa

    y nada mas el HTML esta vacio, ¿de que entonces todos estan hablando, no entiendo, sus tutoriales son para la pagina blogger de google o quizas es de otra pagina?

    ResponderEliminar
  3. genial chevere buen pos grasias a este tuturial cambie los colores de los enlace de mi pagina miren como quedo www.solocuriosidades100.com

    ResponderEliminar
  4. simple cambie los colores azules con colores que cordine con mi plantillas y quedo chevere pueden verlo: http://www.solocuriosidades100.com/

    ResponderEliminar