Links en cualquier parte del blog con efecto "deslizante" usando JQuery

Tras haber visto varios sitios web en los que habían implementado efectos con JQuery, pensé en un truco (ya implementado en diversas plantillas para blogger) que quizás fuese de tu interés.

Antes de comenzar, te dejo con el blog de pruebas para que veas el resultado.

Simplemente tienes que pasar el cursor por cualquier etiqueta que aparece en la barra lateral, o por el título de cualquier post.

Suponiendo que te gusta el resultado, comenzaré a explicarte cómo incluir el efecto en tu blog.

Diseño>Edición HTML>expandimos artilugios

Busca la etiqueta </body> y encima añade estos scripts:

<!-- jQuery -->
<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>
<!-- Fin JQuery -->

<!-- Efecto links -->
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#Label1 li, .post-labels, .post h3, #BlogArchive1 li&#39;).hover(function() { //mouse in
$(this).animate({ marginLeft: &#39;12px&#39; }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script>
<!-- Fin efecto links -->

El primer script es el de JQuery (recogido entre las etiquetas marcadas en verde). Si ya lo tienes implementado en tu plantilla, no hace falta que agregues de nuevo.

El segundo script (recogido entre las etiquetas marcadas en naranja) es el que activará el efecto.

Puedes hacer que cualquier enlace de tu blog se deslize. La línea marcada en azul, en el segundo script resalta los siguientes nombres:

#Label1 li: Esto es el gadget de etiquetas (en caso de tener más de un elemento "etiquetas", deberás añadir #Label2 li).

.post-labels: Los enlaces de las etiquetas que aparecen bajo o sobre la entrada.

.post h3: El título de los artículos o entradas.

#BlogArchive1 li: El gadget de Archivos (al igual que con el gadget de etiquetas, en caso de tener más de un elemento "archivos", deberás añadir #BlogArchive2 li).

El script se aplicará a todos los enlaces de los apartados citados previamente, así como a los enlaces de los elementos que agregues en la lista.

Si deseas aplicarlo en alguna zona en particular, deberás incluir el nombre o ID del elemento (por ejemplo, en el caso del título de una entrada: .post h3).

Tal vez en tu plantilla, estas líneas tengan otro nombre (suele suceder con plantillas "tuneadas"). Si se da el caso, consúltame a través de un comentario.