Expandir y contraer cosas en los posts o los gadgets con Scriptaculous
Previamente vimos como expandir o contraer el contenido de un gadget, pero no usabamos ningún efecto. Esta vez, usaremos un efecto deslizante, un efecto slide que podremos aplicar a un gadget o a parte de una entrada.
Antes de comenzar, debemos tener el código de Scriptaculous en la plantilla. Sólo es necesario incluirlo una vez, por lo que si ya lo aplicaste, podrás saltarte este paso.
1) Debes pegar este script antes de la etiqueta </head>
Ahora guarda la plantilla.
2) Una vez tengas el script instalado, ya podrás aplicar el efecto a cualquier parte de tu blog, ya sea en una entrada o en un gadget.
Este es el código para usar el efecto deslizante con un enlace de texto:
Y este es el resultado:
Este es el código para usar el efecto deslizante con una imagen:
Y este es el resultado:
En ambos códigos deberás sustituir lo siguiente:
TEXTO DEL ENLACE por la frase o texto que actuará como enlace para desplegar el contenido.
CONTENIDO OCULTO por cualquier cosa que desees ocultar. Puede ser un código, un bloque de texto, una tabla, una imagen...
URL DE TU IMAGEN por la imagen que actuará como botón para desplegar el contenido.
Notas:
Antes de comenzar, debemos tener el código de Scriptaculous en la plantilla. Sólo es necesario incluirlo una vez, por lo que si ya lo aplicaste, podrás saltarte este paso.
1) Debes pegar este script antes de la etiqueta </head>
<!-- Script Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
<!-- Script Prototype y Scriptaculous-->
Ahora guarda la plantilla.
2) Una vez tengas el script instalado, ya podrás aplicar el efecto a cualquier parte de tu blog, ya sea en una entrada o en un gadget.
Este es el código para usar el efecto deslizante con un enlace de texto:
<div style="margin-left: 30px;"><a style="color: #999999; " href="javascript:void(0);" title="Clic para desplegar" onclick="new Effect.toggle('elemento1','slide'); return false">TEXTO DEL ENLACE</a></div>
<div id="elemento1" style="overflow: visible; text-align: justify; display: none;">
CONTENIDO OCULTO
</div>
Y este es el resultado:
Este es el código para usar el efecto deslizante con una imagen:
<div style="margin-left: 30px;"><span ><a style="color: rgb(153, 153, 153); " href="javascript:void(0);" title="Clic para desplegar" onclick="new Effect.toggle('elemento2','slide'); return false"><center><img src="URL DE TU IMAGEN"/></center></a></span></div><div id="elemento2" style="overflow: visible; text-align: justify; display: none;">
CONTENIDO OCULTO
</div>
Y este es el resultado:
En ambos códigos deberás sustituir lo siguiente:
TEXTO DEL ENLACE por la frase o texto que actuará como enlace para desplegar el contenido.
CONTENIDO OCULTO por cualquier cosa que desees ocultar. Puede ser un código, un bloque de texto, una tabla, una imagen...
URL DE TU IMAGEN por la imagen que actuará como botón para desplegar el contenido.
Notas:
Si te fijas, en los códigos del paso dos aparece dos veces la palabra elemento X resaltada en naranja.
Si quieres añadir este efecto más de una vez, deberás cambiar la palabra elemento X por elemento 1 o elmento 2, siempre y cuando no lo hayas puesto antes en otro código.
Puedes cambiar el efecto deslizante por uno que "aparece" para ello utilizaremos la palabra appear, que incluiremos en lugar de slide.
Si quieres añadir este efecto más de una vez, deberás cambiar la palabra elemento X por elemento 1 o elmento 2, siempre y cuando no lo hayas puesto antes en otro código.
Puedes cambiar el efecto deslizante por uno que "aparece" para ello utilizaremos la palabra appear, que incluiremos en lugar de slide.
Esto es un plagio. copiado literal DE EL BALCON DE JAIME.
ResponderEliminarhe visto los créditos! es verdad fue de los mejores! perdona
ResponderEliminar