Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

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.

CINEXIM dice...

Jaime, gracias por ofrecerte a revisar mi plantilla para la consulta de márgenes que te hize, pero solucioné más o menos el problema. Prefiero pasartela cuando tenga que resolver algo "más grave", jajaj

Muchas gracias!!!

Un abrazo!!!

Anónimo dice...

Hola jaime, aun no vi la ultima entrada que puse en comentarios de tu blog, sera las clases ..jejeje bueno he abierto un blog informativo para mis paginas personales... para que la gente se entere de como va la cosa...

http://elblogdezahira.blogspot.com

Que tal si pones la dire en amigos ;) como siempre y genial lo has echo.

Besitos

Jaime Trujillo Escobedo dice...

CINEXIM, como quieras, aunque no debes preocuparte por la dificultad del problema, siempre que lo desees puedes enviarme un correo con tus dudas ;).

Jaime Trujillo Escobedo dice...

Darkness, siempre que he enlazado tus blogs, me encuentro con que están "abandonados" al poco tiempo, o que los eliminas :S ¿Con este sucederá lo mismo?

¡Saludines!

Anónimo dice...

Jaime, no se mejor no digamos nada, no quiero gafarla... sino quieres poner el link lo entiendo, para luego que no este.

La pena es que solo enlazas blogs y no foros. por que el de michael tiene mucho exito.

Besitos.

Jaime Trujillo Escobedo dice...

Darkness, vamos a esperar un tiempo haber como avanza y quizás enlace tu foro ;).

Anónimo dice...

;)
¡Me encanta el efecto!
Gracias Jaime.

Jaime Trujillo Escobedo dice...

Pí, me alegra mucho que te guste. ¡Qué bien te ha quedado en los títulos¡ ;).

Viktor dice...

Muy bueno, lo he usado para titulos de las entradas

Jaime Trujillo Escobedo dice...

Viktor, ¿verdad que es sencillo?.

Anónimo dice...

lo probare con mi blog de indias :) XD

Anónimo dice...

si jaime no quiso paso el mause por el titulo y no pasa nada :-|

Jaime Trujillo Escobedo dice...

wwe-cv, déjame la url de tu blog y podré ayudarte. Tal vez se deba a que tu plantilla es diferente a las de blogger y el título no se llama .post h3.

Madmoiselle de Axolotl dice...

No me aparece nada :C sigue la plantilla tsal cual la instalé.. ayuda!


http://singularesfotoestudio.blogspot.com/

Jaime Trujillo Escobedo dice...

Maria Luna, ¿estás segura? Yo paso el cursor por encima de tus etiquetas y veo que el efecto funciona :S.

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo