Un enlace en una web, no sirve casi de nada si no se marca de alguna manera. Un link con la misma apariencia que el resto del texto en el que está incluido, pasará desapercibido y será improbable que alguien pinche en él. En ese caso, ¿para que molestarse en ponerlo? (Diccionario informático básico. Link = Enlace)Debe ser por eso, que todos los navegadores destacan de alguna manera, aunque el programador de la web no lo haya previsto, los enlaces creados con la etiqueta A.
La forma habitual de destacar los enlaces es mediante el subrayado de la palabra que sirve precisamente para enlazar (un borde si se trata de una imagen). Además, se suele utilizar un efecto de cambio de color al pasar el puntero por encima (hover) y otro color distinto para los enlaces ya visitados.
Para cambiar las opciones que por defecto lleva cada navegador, tendremos que declarar en nuestra plantilla, qué es lo que nosotros queremos que suceda en todos esos casos. Así, para modificar todos los enlaces, tras el BODY solemos encontrar:
a:link { /* Enlaces sin visitar */
color:#990000; /* Color especial y... */
text-decoration:none; /* ...sin subrayado */
}
a:visited { /* Enlaces ya visitados */
color:#cccccc; /* Otro color... */
text-decoration:none; /* ...y también sin subrayado */
}
a:hover { /* Efecto al pasar el puntero por encima del enlace */
color:#880000; /* Otro color distinto... */
text-decoration:underline; /* ...y texto subrayado en esta ocasión*/
}
a img { /* Enlaces en imágenes */
border-width:0; /* Sin borde */
}
color:#990000; /* Color especial y... */
text-decoration:none; /* ...sin subrayado */
}
a:visited { /* Enlaces ya visitados */
color:#cccccc; /* Otro color... */
text-decoration:none; /* ...y también sin subrayado */
}
a:hover { /* Efecto al pasar el puntero por encima del enlace */
color:#880000; /* Otro color distinto... */
text-decoration:underline; /* ...y texto subrayado en esta ocasión*/
}
a img { /* Enlaces en imágenes */
border-width:0; /* Sin borde */
}
Si queremos cambiar los enlaces de sólo cierto bloque de información, habrá que localizar la clase que controla el estilo de ese bloque y definir para ella estas misma pseudoclases. Por ejemplo, para alterar sólo el aspecto de los enlaces dentro del cuerpo principal de los posts:
.post a {color:#333333; text-decoration:underline;}
.post a:visited {color:#cccccc; text-decoration:none;}
.post a:hover {color:#990000; text-decoration:none;}
.post a:visited {color:#cccccc; text-decoration:none;}
.post a:hover {color:#990000; text-decoration:none;}
Sabiendo esto y a través de otros atributos CSS, podemos crear algunos efectos algo distintos:
* SUBRAYADO CON UNA IMAGEN
Realmente no es un subrayado. Aplicamos una imagen alargada y estrecha como fondo (BACKGROUND) del enlace y lo desplazamos a la línea base (BOTTOM). Si es necesario, porque ocupe varis pixels, se inserta un desplazamiento abajo mediante un PADDING-BOTTOM. Si el principio y el fin de la imagen no enlazan bien gráficamente (REPEAT-X), entonces mejor usar una imagen los suficientemente larga. Teniendo en cuenta que un enlace no suele pasar el tamaño de una frase sencilla, seguramente con 400px tengais de sobra. Preferentemente, usar GIF con transparencia (o PNG).
.post a {
color:#333333;
text-decoration:none;
padding-bottom:2px;
background:url(URL_IMAGEN) repeat-x left bottom;
}
color:#333333;
text-decoration:none;
padding-bottom:2px;
background:url(URL_IMAGEN) repeat-x left bottom;
}
* JUGANDO CON EL FONDO
En este caso, se puede utilizar un color plano o una imagen para conseguir al mismo tiempo un efecto rollover.
a {background:#ffff90;}
a:hover {background:#3CFF3C;}
a:hover {background:#3CFF3C;}
Ejemplo enlace 1
a {background:url(URL_IMAGEN1);}
a:hover {background:url(URL_IMAGEN2);}
a:hover {background:url(URL_IMAGEN2);}
Ejemplo enlace 2
Ejemplo enlace 3
* UN ICONO PARA IDENTIFICAR LOS ENLACES
Otra forma de destacar nuestros enlaces, es mediante un pequeño icono que podemos colocar delante o detrás de éstos. Hay que tener cuidado de que el alto del icono sea el mismo que nuestro tamaño de fuente (FONT-SIZE), para que el conjunto quede lo mejor posible. Dejaremos un pequeño margen y luego situaremos el fondo en el lado adecuado.
a {padding-left:15px;background:url(URL_IMAGEN_ICONO) no-repeat left bottom;}
Ejemplo enlace 1
a {padding-right:15px;background:url(URL_IMAGEN_ICONO) no-repeat right bottom;}
Ejemplo enlace 2
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Otra manera de destacar los enlaces también sería con el subrayado; aunque en mi blog lo uso, pronto lo cambiaré para que se vea un color de fondo así clarito, que creo que hará que se vean mejor.
ResponderEliminarBuen post, un saludo ;)
Oloman, no sólo nos salvas el blog en más de una ocasión, si no que además das sabios consejos. Eres lo que yo llamo un autentico todo terreno. En esta ocasión no tengo consulta, pero creo que es justo felicitarte también sin necesidad de que nos tengas que dar siempre algo a cambio.
ResponderEliminarHola Oloman,
ResponderEliminarMuy buen artículo y para mi muy buena respuesta.
Me gustaría saber como pones esa imágen en tu formulario de comentarios ( antes de hacer una consulta, por favor utiliza el buscador de arriba... )
Grácias, espero tu respuesta!!!
Muy fácil, pero permíteme que lo deje para otro momento, que hoy ando con prisa.
ResponderEliminarHola brother queria preguntarte algo acerca del el efecto greybox, si es utilizable en blogger o definitivamente no hay ninguna forma de aplicarlo a este?
ResponderEliminarTe vas a reir de mí pero en mi blog no me funcionan los enlaces. ¿Podrías echarme una mano? Tampoco he encontrado el famoso "body"
ResponderEliminarSoy un inútil
siempre que necesite algun tipo de ayuda con mi blog,aqui encontre la respuesta,o sea que ya te di mi voto en los premios de la blogoteca.....suerte!!!!!
ResponderEliminarJL, los enlaces funcionan aquí y en Singapur... y ahora me río :), tal y como dices. Bromas aparte, en tu blog tienes montones de enlaces, por lo que pienso que lo que quieres decir es que no funcionan los que tú montas a mano. Aquí tienes una pequeña explicación de cómo crear un enlace.
ResponderEliminarDesde el editor de entradas Blogger, hay un icono que te inserta automáticamente el código con sólo introducir la dirección de destino.
Por último, para encontrar el BODY u otros elementos HTML de tu plantilla, tienes que acceder a la parte DISEÑO del panel del control.
MasterofPuppets, no conozco ese SCRIPT, aunque le he echado un vistazo y veo que es para crear ventanas modales. Le daré una vueltecita y si veo que se puede aplicar en Blogger, ya publico cómo hacerlo. Saludos.
ResponderEliminarHola Oloman,
ResponderEliminarHe hecho un escrito sobre tu blog en el mío, está en catalán pero siempre puedes traducirlo:
http://vidademon.blogspot.com/2009/07/oloblogger-blogger-para-torpes-y-para.html
Espero que te guste
Ahora lo veo Pau.
ResponderEliminarMasterOfPupets, me he estado peleando con el GreyBox ese y no he conseguido sacarle punta. Lo cierto es que pensaba que no daría problemas para Blogger, pero me parece que en el código original hay algo que a Blogger no lo sienta bien, pues cuando grabas los scripts, los destroza totalmente. Algún punto y coma de más o de menos o alguna tontería de esas.
He echado un vistazo somero al código y no he encontrado el fallo. Sinceramente me da mucha pereza repasar una a una los cientos de líneas que tienen los 3 scripts necesarios para que funcione.
A cambio, te puedo proponer que veas este otro script para ventanas modales que funciona seguro y cuyo resultado es muy bueno.
Lo siento.
Hola Oloman, he probado con el siguiente código
ResponderEliminar.post a {
color:#333333;
text-decoration:none;
padding-bottom:2px;
background:url(URL_IMAGEN) repeat-x left bottom;
}
Sin embargo me cambia todo, incluyendo el título del post. Porfavor me podrías ayudar para que dicha modificación no afecte a los titulos de los post?.
De antemano gracias por la respuesta.
http://alexcastaneda.blogspot.com
Alexcastaneda, además de hacer lo que dices, añade (si no la tienes ya), la clase
ResponderEliminar.post h3
y en ella coloca las características originales de los enlaces. Lo que estamos haciendo es definir un estilo para todos los enlaces de los posts y luego crear uno distinto para los que son títulos.
Hola Oloman, muchisimas gracias, sin embargo no me ha funcionado lo que me has dicho, pero despues de 5 o 4 horas de intentar e intentar, me he dado cuenta que la solución para resaltar solo los enlaces contenidos en el post, es el siguiente código.
ResponderEliminar.post-body a {
color:#333333;
text-decoration:none;
padding-bottom:2px;
background:url(URL_IMAGEN) repeat-x left bottom;
}
Muchas gracias por darme esa pista, ya que sin ella seguramente no hubiese podido hacer nada. Gracias.
Website: alexcastaneda.blogspot.com
¡Ooops! Se me escapó que existía esa clase al comprobar tu código. De todas formas, el mérito es tuyo y seguro que esas 4 ó 5 horas te sirven en el futuro para ahorrarte muchas más.
ResponderEliminarJeje gracias Oloman, pero creo que tienes razón, parece que cuando uno mismo descubre la solución, es menos probable que la olvidemos. Pero he aprendido algo, que para la próxima intento unas 4 o 5 horas y luego te pregunto jejeje... Gracias.
ResponderEliminarwebsite: alexcastaneda.blogspot.com
Hola Oloman, muy bien explicado aunque soy novata y estoy estudiando, intentaré aplicarlo a mi blog a ver si funcional. Buen trabajo.
ResponderEliminarHola!!
ResponderEliminarComo puedo poner en un post un enlace a una dirección de correo??
Gracias majo
Paloma, la estructura es esta:
ResponderEliminar<a href="mailto:destinatario@dominio.com">Mándanos un correo</a>
hola, me he perdido, ¿dónde pones enlaces relacionados debajo de cada entrada? no encuentro nuevamente el link a tu explicación...
ResponderEliminarlk:
ResponderEliminarForma artesanal
Forma externa, pero más resultona.
Hola Oloman! He aplicado a mi blog este truco, pero el problema es que también se aplica a las imágenes con enlace... ¿Alguna forma de solucionarlo? Gracias y saludos.
ResponderEliminarTendrías que ir a la clase dónde están ese tipo de imágenes y definir el efecto contrario para el tag IMG. Por ejemplo, si le has puesto a los enlaces un background y resulta que te molesta en las imágenes de los posts porque tienen transparencia y se ve...
ResponderEliminar.post-body img {
background:none;
}
...debería solucionarlo. Tienes que utilizar la clase que use tu blog para el contenido de las entradas... o lo que sea.
es excelente este blog, tiene muy buenos consejos..
ResponderEliminarparticularmente esta entrada me sirve mucho!
gracias!
un saludo
de muchisima gran ayuda. cambie un monton de cosas de mi blog (rodry's company), minimas, pero muchas.
ResponderEliminarLo de los links, algunos en al sidebar que se agrande la letra al pasar el mouse, flechitas, etc. :D
Hola oloman me parece un excelente tutorial, pero otra vez hasta ahora no entiendo, donde tengo q pegar este codigo del fondo, bueno quisiera agregar un fondo a mis titulos de cada post asi como tienes tu en cada post q al pasale el cursor en el titulo de tu post sale su fondo amarillo, espero q me ayudes .. Saludos !!
ResponderEliminar"Si queremos cambiar los enlaces de sólo cierto bloque de información, habrá que localizar la clase que controla el estilo de ese bloque y definir para ella estas misma pseudoclases."
ResponderEliminarEn tu caso, esta clase es .post h3
Saludos