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):
- darle-estilo-al-widget-de-entradas
- anadir-iconos-sociales-giran-horizontal
- menu-iluminado-con-css-para-blog
Instrucciones para añadir enlaces que danzan a tu blog de blogger.
Paso #1Entra 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-->Ahora Guarda tu Plantilla..
<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 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!
0 comentarios:
Publicar un comentario