Enlaces y Imagenes Que danzan Con Jquery Para Blogger

 En esta ocasion te mostrare como insertar enlaces que bailan, si has notado en ciertos paginas web y blogs muchos las han implementado para darle ese truco o efecto de animacion a sus enlaces. Este se activa cuando apuntas el cursor sobre un enlace esto se hace usando  Jquery - Empujar Enlaces.

He aqui un ejemplo (pon el cursor de tu mouse sobre los enlaces):


CiudadBlogger.info

• darle-estilo-al-widget-de-entradas
• anadir-iconos-sociales-giran-horizontal
• menu-iluminado-con-css-para-blog

Efecto de Empujar Imagenes:


  

Instrucciones para añadir enlaces que danzan a tu blog de blogger.

Paso #1
Entra en tu cuenta de Blogger ve a Plantilla -> Editar HTML
y encuentra (CTRL+F)este codigo en tu plantilla:

</head>

Paso #2
Ahora inmediatamente arriba/antes de este </head>, pega este codigo:

<!--Comienza Enlaces--Empujados-Danza-->
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('a.nudge').hover(function() { //mouse in
$(this).animate({ paddingLeft: '20px' },400);
}, function() { //mouse out
$(this).animate({ paddingLeft: 0 }, 400);
});
});
</script>
<!--Termina- Enlaces--Empujados-Danza-http://www.ciudadblogger.info-->

Ahora Guarda tu Plantilla..

Ahora cuando quieras añadir este efecto de danza  a cualquiera de tus enlaces/imagenes (ya sea como un widgets/entradas), añade este codigo (class="nudge") a la etiqueta  "a" de Html ejemplo :

<a href="http://www.ciudadblogger.info" class="nudge">Texto Enlace</a>

y para usar imagenes en lugar de texto, usa este codigo:

<a href="http://www.ciudadblogger.info" class="nudge"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij3EoonxP5CL_NpBDkLXocnUdkOFURNCEL_xanV5a9aYu4HyGuLQGJvSY8DRV7yrjD3V0tew532DPHFeetIvoQOUlnaJfdbgn4J0WgO22dpBTWW2itgg_FNvSZE6awZ4dszqNCiTG7d-dz/s1600/carreteras7kk3.jpg"/></a>

Nota:texto rojo del codigo de arriba representa la imagen que deberas reemplazar con url o direccion de tu imagen favorita.

Eso es todo. Deja que tus imagenes y enlaces le bailen a tus lectores!

Read More