En ocasiones, el estilo que hemos establecido en la plantilla para los enlaces (links) puede no resultar válido para una determinada entrada o sección del blog.
En concreto se me presentó este problema al modificar el aspecto de la caja de resultados cuando se hace una búsqueda interna en el blog (ver "Personalizar el cuadro de resultado de la búsqueda").
Al establecer un fondo en tonos naranjas, el enlace visitado no se resaltaba lo suficiente para ser visible. Podría modificar el color a través del Diseñador de Plantillas de Blogger, pero entonces el cambio afectaría a todos los enlaces del blog.
Definir el color de los enlaces (links) en Blogger
Blogger diferencia tres estados posibles para los enlaces y permite establecer un color para cada uno de ellos;
- Enlace_El enlace cuando no se ha ejecutado ninguna acción sobre él.
- Enlace visitado_El enlace cuando el usuario ha hecho clic sobre él. De esta forma facilita la navegación ya que permite distinguir los enlaces visitados y los no visitados.
- Enlace cuando se coloca el ratón sobre él_Es posible resaltar un enlace cuando se situa el ratón sobre él. Esto ayuda a comprender que estamos ante un enlace y no se trata de un texto resaltado.
¿Dónde se configura el color de los enlaces en Blogger?
Dentro del menú Plantilla, hacemos clic sobre Personalizar.
Se abre el Diseñador de plantillas de Blogger y seleccionamos Avanzado-Enlaces.
Como se puede ver en la imagen superior, podemos establecer el color para cada uno de los tres estados de los enlaces.
A partir de ahora, todos los enlaces del blog se mostrarán con los colores que hemos seleccionado para cada uno de ellos.
¿Cómo se puede cambiar el color de los enlaces para una situación concreta sin que se modifique su aspecto en el resto del blog?
A continuación voy a ver 5 situaciones distintas para el enlace cuando no se ha visitado ni se ha posicionado el ratón sobre él.
Personalizar enlace cuando no se ha ejecutado ninguna acción
Modificar el color del enlace solo para el cuadro de resultado de la búsqueda
Voy al menú Plantilla-Editar HTML.
Dentro de la ventana donde se muestra el código HTML abro el buscador con CTRL+F y busco <!-- override gsearch.css -->
Aparece el siguiente código donde hay dos etiquetas que corresponden a los enlaces (en negrilla).
<!-- override gsearch.css -->
<style type='text/css'>
#uds-searchControl .gs-result .gs-title,
#uds-searchControl .gs-result .gs-title *,
#uds-searchControl .gsc-results .gsc-trailing-more-results,
#uds-searchControl .gsc-results .gsc-trailing-more-results * {
color:<data:linkColor/>;
}
#uds-searchControl .gs-result .gs-title a:visited,
#uds-searchControl .gs-result .gs-title a:visited * {
color:<data:visitedLinkColor/>;
}
<style type='text/css'>
#uds-searchControl .gs-result .gs-title,
#uds-searchControl .gs-result .gs-title *,
#uds-searchControl .gsc-results .gsc-trailing-more-results,
#uds-searchControl .gsc-results .gsc-trailing-more-results * {
color:<data:linkColor/>;
}
#uds-searchControl .gs-result .gs-title a:visited,
#uds-searchControl .gs-result .gs-title a:visited * {
color:<data:visitedLinkColor/>;
}
Elimino estas etiquetas que indican el color que está establecido por defecto para los enlaces y los cambio por otros colores (rojo para Enlace y verde para Enlace visitado).
<!-- override gsearch.css -->
<style type='text/css'>
#uds-searchControl .gs-result .gs-title,
#uds-searchControl .gs-result .gs-title *,
#uds-searchControl .gsc-results .gsc-trailing-more-results,
#uds-searchControl .gsc-results .gsc-trailing-more-results * {
color:red;
}
#uds-searchControl .gs-result .gs-title a:visited,
#uds-searchControl .gs-result .gs-title a:visited * {
color:green;
}
<style type='text/css'>
#uds-searchControl .gs-result .gs-title,
#uds-searchControl .gs-result .gs-title *,
#uds-searchControl .gsc-results .gsc-trailing-more-results,
#uds-searchControl .gsc-results .gsc-trailing-more-results * {
color:red;
}
#uds-searchControl .gs-result .gs-title a:visited,
#uds-searchControl .gs-result .gs-title a:visited * {
color:green;
}
Modificar el color del enlace en una única entrada
Si queremos cambiar el color de un enlace en una sola entrada, manteniendo el color que hemos configurado para el resto de los enlaces del blog, tenemos que editar el código HTML de esa entrada.
Dentro de la entrada en la que queremos incluir el enlace hacemos clic sobre "Editar".
Y ahora seleccionamos HTML,
Solo queda localizar la etiqueta con el enlace y añadir el estilo con la etiqueta <span>
<a href="https://prodpersonal.blogspot.com.es/.......#nombreancla"><span style="color: red;">"Texto que se muestra en el enlace"</span></a>.
Modificar el tamaño de letra del enlace en una única entrada
Para este caso utlizamos la etiqueta <span style="font-size>
<a href="https://prodpersonal.blogspot.com.es/.......#nombreancla"><span style="font-size: 18px;">"Texto que se muestra en el enlace"</span></a>.
Modificar el tipo de letra del enlace en una única entrada
La etiqueta a utilizar es <span style="font-family>
<a href="https://prodpersonal.blogspot.com.es/.......#nombreancla"><span style="font-family: verdana;">"Texto que se muestra en el enlace"</span></a>.
Si queremos modificar el color, tamaño y fuente del enlace incluimos las tres etiquetas span.
<a href="https://prodpersonal.blogspot.com.es/.......#nombreancla"><span style="color: red;"><span style="font-size: 18px;"><span style="font-family: verdana;">"Texto que se muestra en el enlace"</span></span></span></a>.
El enlace se mostrará así,
Personalizar los tres estados de un enlace
En los 5 casos anteriores solo se ha personalizado el enlace antes de ser visitado y sin posicionar el ratón sobre él (el primer caso). Las dos situaciones restantes mantendrán los valores por defecto (enlace visitado y enlace cuando se posiciona el ratón sobre él).
Ahora voy a intentar modificar (solo para un enlace) los tres estados comentados al inicio de esta entrada.
De nuevo tengo que entrar en la edición HTML de la entrada y localizar el enlace cuyo estilo quiero modificar.
Para este caso tengo que utlizar la etiqueta <div id=""> que me permite identificar el elemento de la página al que le voy a aplicar estilo.
Las id se referencian con el prefijo # mientras que las clases se referencian con el prefijo . (para el caso de <div class="">
Necesito crear un nombre para la id ("estilo_enlace") que pondré en el punto de inicio del elemento al que voy a aplicar el estilo. Al término, tendré que cerrar la etiqueta div con </div>.
El estilo se incluirá entre las etiquetas <style>..</style>
- a:link hace referencia al enlace sin acción. En el ejemplo está en color red, letra AR CENA y tamaño 18px.
- a:visited es el enlace una vez ha sido visitado. Sus propiedades están reducidas. La propiedad color generalmente es aceptada en todos los navegadores. En el ejemplo está en color green.
- a:hover es el estilo del enlace cuando se posiciona el ratón sobre él. En el ejemplo está en color orange, letra impact y tamaño 25px.
- a:active cuando el enlace está ya activado (no lo inlcuyo en el ejemplo).
El código sería el siguiente,
<div id="estilo_enlace">
<a href="https://.....URL del enlace">"Texto que se muestra en el enlace"</a>
<style>
#estilo_enlace a:link {
text-decoration:none;
color:red;
font-size:28px;
font-family: 'AR CENA', sans-serif;
}
#estilo_enlace a:visited {
text-decoration:none;
color:green;
}
#estilo_enlace a:hover {
text-decoration:none;
color:orange;
font-size:25px;
font-family: 'impact', sans-serif;
}
</style>
</div>
<a href="https://.....URL del enlace">"Texto que se muestra en el enlace"</a>
<style>
#estilo_enlace a:link {
text-decoration:none;
color:red;
font-size:28px;
font-family: 'AR CENA', sans-serif;
}
#estilo_enlace a:visited {
text-decoration:none;
color:green;
}
#estilo_enlace a:hover {
text-decoration:none;
color:orange;
font-size:25px;
font-family: 'impact', sans-serif;
}
</style>
</div>