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.
Enlaza este blog
Suscribirse al feed
Suscribirse por e-mail
Agregar en tu iGoogle
Seguir en Twitter
Unirse en Facebook
Enviar un correo
Iconos RSS.PNG)
Música JPZ
38 comentarios:
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!!!!
Jajaja, ese truco quizá Anti Hacker lo sepa hacer con algún virus, yo no, jaja.
Un abrazo!
encantadores El Potro!!! esto sí lo aplico es fácil :D
Saludos!!!
muy util potro, ya lo pongo en mi blog. Gracias!
vaya pero que buen efecto le dan a los enlaces esas imagenes :)
saludos!
Graciela, más que fácil =)
Saludos.
Julián Cardoso, me alegro que te haya gustado. Saludos.
fabian ¿verdad que sí? hasta a mí me están dando ganas de usarlo =)
Saludos!!!
Jajajajajajajajajajajaja!!!!!!!
Un abrazo!!!
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
TU ERES EL BRAVOOOO!!
SALUDOS
@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.
rAFO, me alegra que te haya gustado el post. Saludos!
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! :)
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.
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
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
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.
Muy buena idea Potro, ademas es muy fácil de implementar y se ve de lujo.
Saludos!
Me gustaa!!
Pero no se si me quedara bien en mi blog :&
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.
Muchas gracias ya lo vi y he agregado muchas gracias
hola sabes que en mi plantilla no aparece el a:hover ni siquiera expandiendo los artiguilios
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.
graciasssssss potro no se como agradecertelo
potro haora si estas mejorando pareces el rey!
un saludo!
No es para tanto Ledwin pero muchas gracias.
Saludos!
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!
Ya me he dado mis vueltas por ahí ;)
Visita la sección de Dominios, ahí encontrarás opciones de redireccionamiento.
Saludos.
grax potro eres el mejor!
siempre contare contigo :D
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!
No es ninguna molestia.
Saludos!
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;
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.
me gusto mucho este post grasias desde http://romsfullworld.blogspot.com/
Me alegra que haya sido de tu agrado esta información :D
Potro como cambio el color de mi fondo dentro de la plantilla? o donde lo encuentro. gracias
Tabm quisiera saber donde cambio el color de los titulos de las barras laterales! gracias!
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.
Publicar un comentario en la entrada
Gracias por tus comentarios. Si tienes una consulta sobre tu blog deja la dirección del mismo.