Si quieres que tu lista de enlace tenga un bonito efecto no dejes de leer este post, porque
David Walsh en su blog nos enseña un bonito efecto llamado
"Nudging" que podemos utilizar en nuestros enlaces. Ahora les enseñare como lo podemos utilizar en un blog de blogger.
El efecto es muy interesante, cuando pasas el mouse sobre tu lista de enlaces este suele irse hacia la derecha con una ligera animación en milisegundos. Puedes ver un ejemplo en
mi blog de pruebas.
Para ponerlo en tu blog de blogger primero tienes que tener la librería jQuery en tu plantilla, así que copia y pegan el siguiente código antes de
</head>.
<script src='http://dl.dropbox.com/u/3373498/PazosBlogger/jquery-1.2.6.js' type='text/javascript'/>
Ahora añadiremos el efecto, añadiendo lo siguiente antes de
</head>.
<script src='http://dl.dropbox.com/u/3373498/PazosBlogger/Nudging.js' type='text/javascript'/>
Guardamos los cambios y nos vamos a
Diseño > Añadir gadget > elijes
HTML/Javascript y pegas el siguiente código:
<a href="
URL"class="nudge">
Nombre-del-enlace-</a>
En caso de que quieras ponerlo en un enlace con imagen copia el siguiente código:
<a href="
URL"class="nudge"><img src="
URL-de-tu-imagen" /></a>
Como puedes ver en los enlace hemos añadido
class="nudgre" para llamar al efecto.
La animación es configurable, puedes bajarte el script en el enlace que te dejo abajo. Para este post lo he configurado con un valor de 45 pixeles para la animación de desplazamiento y de 1 pixel para el retorno de la animación, con una velocidad de 400 milisegundos. Si es que te vajas el script verás que hay 2 variable que puedes configurar en "paddingLeft".
Descargar Script
5 comentarios:
En primer lugar quiero felicitar al autor del post pues me parece muy interesante.
Pude insertar esta animación en mi blog y, ahora me gustaria configurarla para que el desplazamiento sea menor. ¿Qué debo de hacer?
No se si debo de bajar el script, modificarlo y copiarlo en algun sitio del blog. Si es así, ¿puedes decirme en qué parte del codigo del blog?.
Aquí te mando la dirección de mi blog por si quieres echar un vistazo: http://auxspamania.blogspot.com/p/spa-elegante.html
Mi e-mail es: perkkkele@hotmail.com
Gracias.
Hola javier, gracias por tus palabras y tu felicitación. Pues mira, tienes que descargar el script:
http://dl.dropbox.com/u/3373498/PazosBlogger/Nudging.js
y cambiar: paddingLeft: '45px' }, 400) donde dice 45px por 20 px por ejemplo. Para que la animación sea más lenta o más rápida, cambia donde esta el valor 400 por lo que tu consideres convenientemente. Luego subes nuevamente el script a tu servidor. Saludo!
Hola Eduardo,
gracias por tu pronta respuesta. Por otro lado, ya pude bajar el script y modificarlo pero no se cómo realizar lo de subirlo al servidor. En mi caso lo he aplicado a un blog de "blogger" y no se cómo hacer este paso. Te agradezco si me puedes echar una mano.
Un saludo.
Javier Úbeda, lee este post subir script a Dropbox. Otra forma de hacerlo, es subir el script en tu plantilla, ve a Diseño > añadir gadget > y elijes > HTML/Javascript y pegas esto:
<script type='text/javascript'>
...contenido del script...
</script>
Pones el código del Script lo cierras y listo. Saludos!
@Eduardo Sanguino
como lo hago pa ponerlo en las etiquetas gracias
Quieres Comentar
Todos los comentarios están siendo leídos y moderados.
- Todos los comentarios deben ser relacionados con el artículo
- Serán borrados aquello comentarios que sean considerado SPAM
- Si quieren pedir ayuda,que no tenga nada que ver con el post, utilicen la página de Contacto
- Los comentarios serán publicados a la brevedad mínima posible
¿NO PUEDES COMENTAR?
¡Si no puedes ver la caja donde tienes que poner la palabras de verificación, has clic en donde dice "Verificación de palabras" y te saldrá la cajita donde tienes que ingresar la palabra!
NO TE OLVIDES DE RECOMENDAR PAZOSBLOGGER.COM A TUS AMIGOS