Sabemos que el efecto hover produce un cambio al pasar el ratón sobre un elemento, el que vemos con más frecuencia es el efecto hover en enlaces. Subrayados, letra en negrita, iconos, texto adicional, cambio de color y un largo ect...
En general los enlaces de la plantilla los tenemos definidos en body { más o menos así:

a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}

Al utilizar la opción de fuentes y colores automáticamente los colores quedan configurados sin necesidad de modificar la plantilla, si queremos añadir un color distinto al de la paleta que proporciona Blogger es necesario hacerlo manualmente.
Para ello hay que tener en cuenta lo siguiente:

» a:link "tal y como lo vemos"
» a:visited "enlace visitado"
» a:active "cuando se está pulsando"
» a:hover "con el cursor encima"

Cambiar de color es tan sencillo como sustituir por ejemplo color:$linkcolor; por color:#940f04;

Para conseguir el efecto hover es necesario añadir los estilos donde deseamos que se produzca el efecto.
Por ejemplo al pasar el ratón sobre el enlace vamos a añadir letra en negrita, pero antes eliminamos " text-decoration:underline;" ese estilo nos añade un subrayado.

a:hover {
color:$titlecolor;
font-weight:bold;
}

Para añadir color de fondo añadimos:

a:hover {
color:$titlecolor;
background:#940f04;
}

Normalmente los enlaces de una página guardan cierta similitud, sin embargo hay excepciones y añadimos un efecto discreto en las entradas y otros más vistosos en la sidebar.

Para ejemplos vistosos encontré algunos que me gustaron mucho.




Gem@ BLOG


Añadimos en CSS antes de ]]></b:skin> los estilos.

abbr[title]:after{
/*Workaround for Gecko*/
content: "";
}

abbr[title]:hover:after{
/*Shows the value of the title attribute when hovered*/
content: " (" attr(title) ")";
}

En HTML (en cualquier lugar donde deseamos añadir el efecto)

<abbr title="mensaje-de-texto">texto-visible</abbr>



Probando y jugando


También en CSS antes de ]]></b:skin>

strong:after,
#n2 strong:before{
/*Workaround for Gecko*/
content: "";
}
strong:hover:after{
content: "\00BB"
}
strong:hover:before{
content: "\00AB"
}

En HTML (en cualquier lugar donde deseamos añadir el efecto)

<strong>Probando y jugando</strong>

Es cuestión de gustos, de ideas y de ganas de jugar.

Antony

Muy original... Vamos a ver como me sale a mi...

Saludos!

Responder
k_nelita

Que lindo está esto gem@, y se podría poner por ejemplo, el que mas me gustó es el de las comillas o strong, en los títulos de los post?
Y donde iría en ese caso lo del HTML?

Cambiando de tema, si lo que te funciona mal es el botón de encendido y apagado, y no quieres dejar la pc prendida, claro, ja ja no has probado de desenchufarla del toma corriente? en lugar de usar el botón?
No me hagas caso, mejor llama al técnico, pero me asusta que allí tarden tanto en hacer una reparación, acá te la reparan de un día para el otro cuando no en el mismo rato.

Hasta los fines de semana, a mi me la llevaron un Sabado a la tarde y el Domingo a la tarde estaba de vuelta y renovada totalmente...

Es que no quiero perder contacto con vos :(

Beso gemit@ ;)

Responder
Graciela de Palomas

jajaja Nelita podemos llevar nuestros técnicoa, pagan bien allí Gema:O
Me gustaron muchísimo, sabes lo que tardé en entenderlo...mis besos!!!

Responder
Sidhe and Darky Dragonseeker

Gema.. me parece súper interesante!! Pero te quiero hacer una pregunta ¿Se puede hacer esto pero en vez de que salga un texto, apareciera un imagen?

Cariños
Byeee :P

Responder
Gem@

» Saludos Antony cualquier duda me dices algo :)

» k_nelita que con tus trucos me quedo sin PC en dos dias jajajaja aquí tienen mucho trabajo y los Sábados y festivos ni cuentes con ellos, yo lo veo lógico pero claro ... fastidia |O
Sobre añadir el efecto en los títulos tengo que probar antes de decirte como hacerlo :)

» Graciela el mínimo es la visita 30 euros, un formateo por ejemplo 60 y si ya nos vamos por la instalación del sistema se puede poner en los 110 a 140 pero eso es para la empresa ellos van a sueldo a no ser que trabajen por cuenta propia ;)

» Sidhe puedes añadir una imagen tranquilamente sustituyendo el texto por:
<img src="aquí-url-de-la-imagen"> :)

Responder
gil

hi friend! nice blog U got here..would U mind if we xlinks? pls let me know..tnx =)

Responder
Claudio - Poca Tinta

:D

Me parece muy interesante en especial para usar en las abreviaturas o listas.

Gracias.

Responder
Gem@

» Thanks Gil ;)

» Me alegro si lo encuentras útil Claudio :)

Responder
Graciela de Palomas

:) allá vamos Nelita :)
Gema aquí sale igual, solo que por ahí la consulta no te la cobran...si es amigo dice 0qué te voy a cobrar!!! y luego le haces un regalo.
Besos!!!

Responder
Graciela de Palomas

Me olvidé de decirte: excelente la explicación que no sabía como colocar lo de los colores en los enlaces, no quiero que aparezca el azul pero en Mozilla se vén igual...

Responder
Sidhe and Darky Dragonseeker

Holis Gema!

Pero.. si quiero colocar la imagen en reemplazo de esto: mensaje-de-texto

¿Cómo tengo que colocar el código en este caso?

Saludos y gracias :P

Responder
Gem@

yz Graciela cambia esos colores de color: tomato y color:DarkCyan por colores hexadecimales ;)

yz Sidhe para ese efecto es mejor el último ejemplo de esta entrada:
Enlaces efecto Hover

Responder
Marga

Hola Gema !!
De nuevo por aquí para segir aprendiendo ...
Creo que no es el sitio justo para la pregunta pero no encuentro dónde hacerla.
Me gustaría saber como hacer esos enlaces que se hacen clicando una palabra concreta dentro de un texto, y te dirije a otra página ...
Ays, no se si me he explicado bien... pero seguro que tu me entiendes jejeje

Un abrazo
Marga

Responder
Gem@

Te explicaste muy bien Marga, el código para crear un enlace de texto es:

<a href="url-de-la-página">aquí el texto</a>

Si ese texto está incluido en una entrada resulta mucho más fácil... supongamos que escribes la entrada normalmente luego haces click en la pestaña de Redactar.
Pulsando el botón izquierdo del ratón marcas con el cursor la palabra que deseas enlazar, la dejas marcada y haces click en el icono de hipervínculos que hay en la parte superior del editor.
Ahí te mostrará el texto que has marcado y te da la opción de pegar la url que deseas enlazar con el texto ;)

Responder
Marga

Hola Gema, tu si que te explicas bien !!!
Ya le pillé el truquillo jeje.
Lo facilito que es y yo sin saber hacerlo ....

Gracias de nuevo.
Marga

Responder
Gem@

:) muchas gracias a ti Marga :)

Responder
globlal mention blog

y para que el efecto backgroad no afecte a las images como le puedo hacer

Responder
Gem@

No entiendo tu pregunta globlal mention blog :S

Responder
Global Metion Blog

Gem@ lo que sucede que yo tengo èste código
a:hover {
color:$titlecolor;
background:#940f04;
}

Y cuando se pasa el mause se encienden, pero
yo quisìera que las imàgenes no seàn afectadas es decir que al pasar el mause no se encienda su contorno entiendes?

Responder
Gem@

Global Metion Blog con a:hover es el efecto al pasar el cursor si no quieres efecto alguno puedes suprimir esa parte de código o... añadir el mismo que en a:link { que es el enlace tal y como lo vemos ;)

Responder
Global mention blog

Si yo quiero que el efecto funcione en links pero lo que pasa es que me afecta imágenes también... y no quiero eso SOLO LINKS... no imagenes

Responder
Gem@

Eso te ocurre porque lo tienes añadido mal.
Los enlaces los modificamos como explico en esta entrada en body {
Tu debes estar haciéndolo en .post img.

Responder
NFFCTS

Hola!!

Primero de todo, felicidades por este gran contenido de ayuda!! Estoy haciendo un nuevo blog y he necesitado mucha de tu información!!

Tengo una duda;
He puesto un menú horizontal en mi blog, y me gustaría que cuando hagas click en una pestaña del menú esta se quede marcada, para ver en que categoría te encuentras, y cuando hagas click en otra pestaña sea esta la que se quede marcada de nuevo y no la anterior, lógicamente...

Si tienes tiempo, espero tu respuesta..
Gracias!!

Responder
Gem@

¿Viste ese efecto en alguno NFFCTS? si lo vieras y me pasas la url vemos como hacerlo ;)

Responder
Hector

Oooh :(( en IE no funciona... por lo menos en mi IE y ya se sabe que lamentablemente la gente sigue usando IE... siempre gracias ;)

Responder
Gem@

Así es Hector no se ve en IE yo uso Firefox porque no encuentro tantos problemas :O

Responder
[ :: WwW.FloWKaletA.CoM :: ]

hola, muy buen post, quiero saber como puedo poner enlaces externos en el menu de navegacion que viene por defecto en la plantilla del blog...gracias

Responder
[ :: WwW.FloWKaletA.CoM :: ]

como por ejemplo tu tienes tu menu de navegacion con tus enalces y texto como los quieres :
* Inicio
* Contenido
* Perfil
* About
* Contacto
* Suscribirse
yo tambien quiero k mi menu aparesca asi pero usando la ubicaion que viene por defecto... ahora si ojala me peudas ayudar gracias

Responder
Gem@

yz FloWKaletA lo primero de todo decirte que cuando añadimos una imagen que tomamos de otro sitio la guardamos para alojarla en nuestro propio alojamiento, no es por nada pero si yo elimino la imagen de top estoy eliminado la url de tu imagen.
Por otra parte el servicio de alojamiento en Blogger es gratuito, pero no todos los sitios lo son y con eso estamos consumiendo ancho de banda de los demás y con ello haciendo que paguen más. Te lo digo porque son cosas que uno desconoce y con buena práctica nos beneficiamos todos.
Sobre el menú, la forma de añadir enlaces externos es de la misma forma que lo tienes ahora sólo que añadiendo la url de la página en lugar por ejemplo de la dirección de tu feed.

Responder
guadalinfo.berja

Hola Gema la verdad que tu blog esta genial y ayuda mucho pero no consigo hacer una cosa y he probado de muchas maneras a ver si me puedes echar una mano se trata del formulario del comentario que el mio no salta de linea y no se como se hace aparte de justificar el texto y en las entradas me pasa lo mismo si no lo hago con codigo html gracias de antemano Saludos

Responder
Gem@

yz guadalinfo.berja he probado el formulario de comentarios y no veo nada extraño, de todas formas comprueba que en Configuración |Formato está marcada la casilla "Convertir saltos de línea" ;)

Responder
Damned

Hola Gem@, ¿qué tal las vacaciones?
Tenía pregunta sobre el hover... ¿Cómo aplicarlo a una imagen? Por ejemplo, en mi caso tengo un pajarito de Twitter que quiero que al poner el ratón encima la imagen cambie por otra... Sé que es posible porque lo he visto, pero llevo un buen rato devanándome los sesos, investigando y buscando y no me sale...
Esperaré tu respuesta, a ver si se te ocurre algo, ¡gracias!

Responder
Damned

¡Ay, Gem@, qué alegría! ¡No te preocupes, ya lo he solucionado! Sólo tengo que configurar el tamaño y la posición, pero ya está! Debí leer los comntarios de esta entrada hastae de preguntarte :$ ¡Siempre me pasa igual!
He combinado los estilos del último y el penúltimo ejemplo de las página que mencionas, imagen y sustitución.
¡Un saludo!

Responder
Gem@

yz Hola Damned, las vacaciones muy bien :) gracias! y me alegra mucho lo resolvieras y me parece genial que encontraras el efecto deseado :)

Responder
Fackss

Hola Gem@.
mira tengo un problema lo que pasa es que tengo un menu estilo mac en el blog y quiero darle efecto hover a los comentarios al pasar el cursor quiero que cambie en color
el problema es que despues del codigo de los comentarios pongo hover {
y me sale todo correcto con el color que yo quiero etc.
pero el menu estilo mac se desordena y no funciona correctamente
que hago?
gracias de Antemano

Responder
Gem@

:: Seguramente ocurre eso porque tienes definidos los mismos estilos para todos los enlaces y el del menú adquiere los estilos de los comentarios, lo que no entiendo es eso que se desordena.

Responder
Fackss

mira entra a mi blog
te eh puesto como invitado

Responder
Fackss

disculpa amigo lo eh solucionado ne faltaba hacer el cierre ese

}

bueno muchas gracias por el post

Responder
Gem@

:: Me alegra esté solucionado Fackss :)

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:) :'( :( :P :D :$ ;) :-I :X :O |O :S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top