sábado, 25 de febrero de 2012

Como poner Divertidos efectos a tus enlaces



Con este Divertido efecto vamos a poder hacer que nuestros Textos e imágenes sean mas dinámicos, ya que le implementaremos, un efecto de movimiento antes de ser enlazados a otras paginas,
aquí abajo encontraras una imagen y un texto de ejemplo en cual veras como se mueven.

de igual manera te dejo un vídeo explicándote paso por paso como hacerlo, así como sus respectivos códigos.

también te dejo otros códigos para que tengas mas variedad y le des ese toque mágico que deseas que tenga tu blog.





                                    Ve como me muevo

vídeo de como se puede poner este efecto a nuestros enlaces 


Estés la etiqueta que hay que buscar </head> la podemos localizar mas rápido dándole click a la tecla (ctrl ) y la tecla (f ) como lo indico en el vídeo, posteriormente insertamos el siguiente código.

 <!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>
<!-- Prototype y Scriptaculous-->
<script type='text/javascript'>

function ShakeEffect(element){
new Effect.Shake(element);
}
</script>

Lo que esta en color Verde lo colocamos cuando se encuentre parte del código que esta en color negro si es que no hay ningún código semejante,  pasamos a insertar todo como lo indica el vídeo.

paso siguiente es colocar los códigos en la entrada de nuestro post. este es el código para que nuestra imagen se pueda mover.

 <div onclick="ShakeEffect(this);">
<a id="shake1" href="URL del enlace"><img src="URL de la imagen"/></a>
</div>


y este es el código para que nuestro texto se pueda mover.

<div onclick="ShakeEffect(this);">
<a
 id="shake2" href="URL del enlace">Texto del enlace</a>
</div>

Ahora vamos hacerlo mas dinámico, vamos hacer que al pasar nuestro ratón, en cima de la imagen o del texto pueda hacer ese efecto, y para ello hacemos lo siguiente, cambiamos lo que esta en color azul onclick y colocamos onmouseover


Si deseamos incluir mas imágenes o textos pero, para que se muevan uno por uno, y no juntos como están en este blog, entonces haríamos siguiente.

Cambiamos el id por otro numero es decir,  id="shake1"  id="shake2"  id="shake3" y asi sucesivamente, solo cambiaremos el numero que esta en color azul por un numero mayor o diferente. para que cada imagen o texto nuevo que coloquemos se puedan mover independientemente.






No hay comentarios:

Publicar un comentario