Enlaces con líneas en movimiento

5 de noviembre de 2009 44 comentarios ,
Ya sabemos que podemos personalizar los vínculos dándole atributos de color, decoración, fondo, etc. Así que partiendo de la misma idea podemos ponerle a los enlaces líneas animadas que aparezcan cuando pasa el cursor encima de ellos.
Para que sepas de qué hablo pasa el cursor sobre los siguientes enlaces y mira el efecto:



Para darle este efecto a tus vínculos entra a Diseño > Edición de HTML y busca esta línea:
a:hover {

Abajo de ella pega cualquiera de estos códigos:

Ejemplo 1
text-decoration:none;
background:url(http://img233.imageshack.us/img233/5403/linearrow.gif);
background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 3px;

Ejemplo 2
text-decoration:none;
background:url(http://img694.imageshack.us/img694/2616/linearrow2.gif);
background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 3px;

Ejemplo 3
text-decoration:none;
background:url(http://img35.imageshack.us/img35/8056/linearrow3.gif);
background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 3px;

Ejemplo 4
text-decoration:none;
background:url(http://img35.imageshack.us/img35/1221/linepoints.gif);
background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 5px;

Ejemplo 5

text-decoration:none;
background:url(http://img233.imageshack.us/img233/1752/lineyellow.gif);
background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 3px;


Si sientes que la línea animada está muy encima del texto puedes modificar padding-bottom: 3px; por otro número, por ejemplo 5px
Así de simple puedes darle a tus enlaces un estilo diferente al pasar el mouse.


44 comentarios en:

" Enlaces con líneas en movimiento "

  1. Wow bro!! esto si que no lo sabía. Tengo que admitir que me equivoqué cuando te dije que sólo te faltaba un truco para que explote el monitor al pasar el ratón sobre el enlace, se que lo harás algún día, pero por el momento quedan muchos trucos que la mayoría, como yo, desconocemos.

    Un abrazo!!!!

    ResponderEliminar
  2. Jajaja, ese truco quizá Anti Hacker lo sepa hacer con algún virus, yo no, jaja.
    Un abrazo!

    ResponderEliminar
  3. encantadores El Potro!!! esto sí lo aplico es fácil :D
    Saludos!!!

    ResponderEliminar
  4. muy util potro, ya lo pongo en mi blog. Gracias!

    ResponderEliminar
  5. vaya pero que buen efecto le dan a los enlaces esas imagenes :)
    saludos!

    ResponderEliminar
  6. Graciela, más que fácil =)
    Saludos.

    Julián Cardoso, me alegro que te haya gustado. Saludos.

    ResponderEliminar
  7. fabian ¿verdad que sí? hasta a mí me están dando ganas de usarlo =)
    Saludos!!!

    ResponderEliminar
  8. Jajajajajajajajajajajaja!!!!!!!


    Un abrazo!!!

    ResponderEliminar
  9. Hola Potro, tengo una interrogante, me gustaria q me la despejaras, como hago para que cuando alguien ponga el mouse sobre el boton BUSCAR de mi blog aparezca una manito como en un enlace? mi blog: http://blogunah.blogspot.com/

    De antemano gracias

    ResponderEliminar
  10. @rielCastellanos,

    En el código del buscador busca esta parte:
    <input id='searchsubmit' type='submit' value=''/>

    Y sustitúyela por esta:
    <input style="cursor:pointer;cursor:hand;" id='searchsubmit' type='submit' value=''/>

    Saludos.

    ResponderEliminar
  11. rAFO, me alegra que te haya gustado el post. Saludos!

    ResponderEliminar
  12. Ahora si te la rifastes POTRO es lo mejor ya se lo eh puesto ami web y ah quedado chulo oie ya tendras una entradita como cuando Buscas algo y no lo encuentas de por lomenos que diga QQUE NO SE AH ENCONTRADO LO QUE BUSCAS Y QUE PRUEBO CON OTRA COSA ES LA DUDA QUE ME AH SURGIDO! :)

    ResponderEliminar
  13. Hola unrealmat,

    Justo ayer estaba tratando de programar algo con la API de Google para que el buscador dé esa opción, pero tras dos intentos lo dejé por la paz. A ver si después lo intento y tengo más suerte.
    Saludos.

    ResponderEliminar
  14. Hola Potro
    ya lo estoy probando pero me falla, lo coloque en uno de mis blogs
    y falla, ademas en otro funciona pero se tarda demssiado en cargar, desidi quitarlo
    pero de todos modos es grandioso el truco
    y bueno ya he estado recomendado tu web a varios amigos
    bye

    ResponderEliminar
  15. valla de mucha utilidad muchas gracias



    Potro te tengo una pregunta tu en tu pagina tienes una sidebar abajo :
    http://img689.imageshack.us/img689/8738/sidebar.png

    me gustaria saber como poner una igual en mi blog te lo agradeseria muchisimo,ya que busque en algunos blog pero no encontre nada paresido y me corde de ti que siempre tienes soluciones a las cosas simples pero imposibles para muchos como yo que no sabemos mucho xD
    bueno de ante manos muchas gracias n.n

    ResponderEliminar
  16. Alex, ¿por qué falla? Para que no tarde en cargar es recomendable alojar las imágenes ustedes mismos para que no se sature la banda ancha de Imageshack. Saludos.

    -Lunatika-, pues muy sencillo no es, al menos no es sencillo de explicar por acá. En quierocrearunblog.com tienen una entrada donde explican cómo hacerlo:
    http://www.quierocrearunblog.com/2009/08/anadir-una-sidebar-doble-debajo-de-la.html

    Saludos.

    ResponderEliminar
  17. Muy buena idea Potro, ademas es muy fácil de implementar y se ve de lujo.

    Saludos!

    ResponderEliminar
  18. Me gustaa!!
    Pero no se si me quedara bien en mi blog :&

    ResponderEliminar
  19. Turko, qué gusto verte de nuevo por acá. Saludos!

    Dj Nestor, podrías buscar otras líneas animadas en formato gif que se adecuen al diseño de tu plantilla, seguro en Internet encontrarás muchas opciones. Saludos.

    ResponderEliminar
  20. hola sabes que en mi plantilla no aparece el a:hover ni siquiera expandiendo los artiguilios

    ResponderEliminar
  21. Hola Omar,

    Sí aparece pero está un poco "escondido", está así:

    a:focus, a:hover {color:#000;}

    Ahí es donde debes agregar lo que se indica en el post.

    Saludos.

    ResponderEliminar
  22. graciasssssss potro no se como agradecertelo

    ResponderEliminar
  23. potro haora si estas mejorando pareces el rey!
    un saludo!

    ResponderEliminar
  24. No es para tanto Ledwin pero muchas gracias.
    Saludos!

    ResponderEliminar
  25. oye potro no hay formas de quitar el
    "blogspot.com"
    sin comprar dominios
    oye y se que mi blog es de un juego de niños
    y varias cosas de niños
    pero
    visitalo es:
    http://panfuamigos-ledwin3.blogspot.com
    me ayudas??
    grax bro
    ¡saludos!

    ResponderEliminar
  26. Ya me he dado mis vueltas por ahí ;)
    Visita la sección de Dominios, ahí encontrarás opciones de redireccionamiento.

    Saludos.

    ResponderEliminar
  27. grax potro eres el mejor!
    siempre contare contigo :D

    ResponderEliminar
  28. em potro lo siento por molestarte tanto pero..
    gracias a tu blog me cree un blog de ayuda para blogger
    es:
    http://ledwin3.blogspot.com
    grax bro te debo 1!
    salu2!

    ResponderEliminar
  29. potro hay alguna posibilidad de que el efecto, No aparezca en el titulo de los post y tampoco en las imágenes que tienen link. Si no solo en los enlaces de texto como cuando tiene:
    text-decoration:underline;

    ResponderEliminar
  30. Ummm no, lo que puedes hacer es que sólo aparezca dentro del área de las entradas, es decir, en el título del blog y la sidebar no tendrá efecto.
    Si lo quieres solo dentro del post agrega el código sólo debajo de:

    .post a:hover {

    Si no tienes esa línea agrégala.
    Saludos.

    ResponderEliminar
  31. me gusto mucho este post grasias desde http://romsfullworld.blogspot.com/

    ResponderEliminar
  32. Me alegra que haya sido de tu agrado esta información :D

    ResponderEliminar
  33. Potro como cambio el color de mi fondo dentro de la plantilla? o donde lo encuentro. gracias

    ResponderEliminar
  34. Tabm quisiera saber donde cambio el color de los titulos de las barras laterales! gracias!

    ResponderEliminar
  35. El color de fondo lo cambias en esta parte:

    body,html {
    font-weight:normal;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#333;
    margin:20;
    padding:20;
    background:#000000 url() 0 0 repeat-x;

    Lo que está en negrita es el código del color de fondo.
    Y el de los títulos de los gadgets debe ser en esta parte:

    #colRightInner h2 {
    color:#00B0F5;
    }

    Igual cambiando lo que está en negrita.

    Saludos.

    ResponderEliminar
  36. UNA ALABANZA A POTRO soy tu fan (no soy gay xD bromaa broma)
    esta genial men otro de tus mejores creasiones. pero como tengo fondo negro no se ve,esk me interesa el ejemplo 3 esta genial, no sabes como ponerlo blanco o azul cielo para k combine con el blog xD. de antemano GRACIAS sigue asi POTRO

    ResponderEliminar
  37. a otra cosa, me podrias desir conde puedo sacar el codigo del anuncio ese amarillo k pusiste esta genial xD
    de antemano grasias

    ResponderEliminar
  38. Hola Hasune Miku,

    Pues se trata de una imagen, tendrías que editarla con un programa que soporte animaciones en formato GIF, o bien, buscar en la red alguna otra imagen parecida que tenga el color que deseas.
    El enlace de la entrada sobre el mensaje tipo post-it es este.

    ¡Saludos!

    ResponderEliminar
  39. se puede poner sonidos en los links o.o?

    ResponderEliminar
  40. Te dejo un enlace de Vagabundia donde explican cómo se hace:
    http://vagabundia.blogspot.com/2011/05/socorro-sonidos-en-cualquier-parte.html

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

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

 
Ir Arriba Ir Abajo
I Ciudad Blogger