Links o imágenes con efecto "deslizante" usando JQuery

Previamente aprendimos a poner links en cualquier parte del blog con efecto "deslizante" utilizando JQuery ^[+].

Dicho truco (cuyo ejemplo puede verse en este blog) se aplicaba a los enlaces en los gadgets que describíesemos en el script, escribiendo su título.

Utilizando este otro método podrás poner tanto enlaces como imágenes con efecto deslizante y de una forma mucho más sencilla.

Diseño>Edición HTML>expandimos artilugios

Busca la etiqueta </head> y encima agrega este script:

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;a.deslizante&#39;).hover(function() {
$(this).animate({ paddingLeft: &#40;20px&#40; },410);
}, function() {
$(this).animate({ paddingLeft: 0 }, 300);
});
});
</script>

Seguidamente guarda la plantilla:




Ahora dirígete a una entrada cualquiera en la que desees poner un enlace o una imagen con el efecto deslizante.

Para poner un link utiliza esta línea:

<a href="URL DE LA PAGINA" class="deslizante">TITULO</a>

Y reemplaza URL DE LA PAGINA por la dirección de tu blog o web, así como TITULO por el texto que llevará el enlace.

Para poner una imagen utiliza esta otra línea:

<a href="URL DE LA PAGINA" class="deslizante"><img src="URL DE LA IMAGEN"/></a>

Y reemplaza URL DE LA PAGINA por la dirección de tu blog o web, así como URL DE LA IMAGEN por la dirección de la imagen o el icono ^[+].

Nota:

Para que no tengas que copiar las líneas de código cada vez que desees hacer uso del efecto puedes utilizar la plantilla de entrada que ofrece blogger ^[+].