18 jun 2011

Efecto de movimiento en títulos de entradas y gadget de etiquetas al pasar el mouse

Primero que nada debemos saber que para añadir este efecto en el blog debemos tener la llamada a JQuery en nuestro blog, esta llamada se coloca solo una vez en el blog, por si no la tienes te la dejo aquí. Este código hay que pegarlo antes de </body>  :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){$('a[href*=#]‘).click(function(){if(location.pathname.replace(/^\//,”)==this.pathname.replace(/^\//,”)&&location.hostname==this.hostname){var $target=$(this.hash);$target=$target.length&&$target||$(‘[name='+this.hash.slice(1)+']‘);if($target.length){var targetOffset=$target.offset().top;$(‘html,body’).animate({scrollTop:targetOffset},1000);return false}}})});
//]]>
</script>
Cotinuamos. Para añadir el efecto en tu blog ve a Diseño > Edición de HTML y pega el siguiente código antes de </body>:
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#Label1 li.post h3&#39;).hover(function() { //mouse in
$(this).animate({ marginLeft: &#39;12px&#39; }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script>
El código anterior indica que los enlaces de los títulos de los posts y del gadget de etiquetas deben tener el efecto.

No hay comentarios:

Publicar un comentario