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.
Ciudad Blogger
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.
ResponderEliminarUn abrazo!!!!
Jajaja, ese truco quizá Anti Hacker lo sepa hacer con algún virus, yo no, jaja.
ResponderEliminarUn abrazo!
encantadores El Potro!!! esto sí lo aplico es fácil :D
ResponderEliminarSaludos!!!
muy util potro, ya lo pongo en mi blog. Gracias!
ResponderEliminarvaya pero que buen efecto le dan a los enlaces esas imagenes :)
ResponderEliminarsaludos!
Graciela, más que fácil =)
ResponderEliminarSaludos.
Julián Cardoso, me alegro que te haya gustado. Saludos.
fabian ¿verdad que sí? hasta a mí me están dando ganas de usarlo =)
ResponderEliminarSaludos!!!
Jajajajajajajajajajajaja!!!!!!!
ResponderEliminarUn 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/
ResponderEliminarDe antemano gracias
TU ERES EL BRAVOOOO!!
ResponderEliminarSALUDOS
@rielCastellanos,
ResponderEliminarEn 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!
ResponderEliminarAhora 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! :)
ResponderEliminarHola unrealmat,
ResponderEliminarJusto 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
ResponderEliminarya 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
ResponderEliminarPotro 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.
ResponderEliminar-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.
ResponderEliminarSaludos!
Me gustaa!!
ResponderEliminarPero no se si me quedara bien en mi blog :&
Turko, qué gusto verte de nuevo por acá. Saludos!
ResponderEliminarDj 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
ResponderEliminarhola sabes que en mi plantilla no aparece el a:hover ni siquiera expandiendo los artiguilios
ResponderEliminarHola Omar,
ResponderEliminarSí 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
ResponderEliminarpotro haora si estas mejorando pareces el rey!
ResponderEliminarun saludo!
No es para tanto Ledwin pero muchas gracias.
ResponderEliminarSaludos!
oye potro no hay formas de quitar el
ResponderEliminar"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í ;)
ResponderEliminarVisita la sección de Dominios, ahí encontrarás opciones de redireccionamiento.
Saludos.
grax potro eres el mejor!
ResponderEliminarsiempre contare contigo :D
em potro lo siento por molestarte tanto pero..
ResponderEliminargracias 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.
ResponderEliminarSaludos!
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:
ResponderEliminartext-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.
ResponderEliminarSi 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/
ResponderEliminarMe alegra que haya sido de tu agrado esta información :D
ResponderEliminarPotro como cambio el color de mi fondo dentro de la plantilla? o donde lo encuentro. gracias
ResponderEliminarTabm quisiera saber donde cambio el color de los titulos de las barras laterales! gracias!
ResponderEliminarEl color de fondo lo cambias en esta parte:
ResponderEliminarbody,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.
UNA ALABANZA A POTRO soy tu fan (no soy gay xD bromaa broma)
ResponderEliminaresta 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
a otra cosa, me podrias desir conde puedo sacar el codigo del anuncio ese amarillo k pusiste esta genial xD
ResponderEliminarde antemano grasias
Hola Hasune Miku,
ResponderEliminarPues 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!
a oks grasias por la info
ResponderEliminarse puede poner sonidos en los links o.o?
ResponderEliminarTe dejo un enlace de Vagabundia donde explican cómo se hace:
ResponderEliminarhttp://vagabundia.blogspot.com/2011/05/socorro-sonidos-en-cualquier-parte.html