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>
<!-- 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.
¿Problemas al comentar? Utiliza 
Hola Rosita:
Quizas te falto agregar las opciones ademas del Slide (appear y blind) aunque ya se que te gusta mas el slide por su elegancia XD, Saludos
Perdon, me equivoque, jajaja, Era Jaime, es que estaba comentando al mismo tiempo en el Escaparate, y se me enredaron los nombres, Perdona amigo, jeje
Cudate y Saludos
GuillermoZ0009! jajajaja, no te preocupes, todos nos equivocamos ^_^ de todas formas, gracias por recordármelo, yo tampoco lo había incluido en la entrada (esque no la hago en el momento, la programé hace unos días y no la revisé :-S).
El efecto appear es muy lindo. =)
Hola Jaime:
¡Es genial, me encanta la idea!
Hoy empiezo mis vacaciones y quería dedicarme muy poquito al blog, sólo lo justito, pero al ver esto ¡Ay, voy a intentarlo!
Bueno, no te prometo nada que mi familia se enfada si estoy mucho en el ordenador, jaja.
Montse, ¡que bien que ya tengas vacaciones!
Ahora puedes estar tranquilamente con tu blog.
Me alegra que te guste la idea, es una estupendísima forma de desplegar y recoger cualquier cosa. ^_^
¡Saludines y felices vacaciones!
P.D. Mi familia también se enfada si estoy demasiado en el PC. ☺
Estimado Jaime. he intentado más de una vez añadir este efecto de expandir en la sidebar y no me da resultado ya que no lo puedo hacer funcionar.
Agradecería de tu ayuda.
SITIO: EL RINCON DE CARLOS
http://rincondecharles.blogspot.com/
UN ABRAZO
CARLOS
Hola Carlos. Te comento que si agregaste el script de Prototype y Scriptaculous una vez no necesitas hacerlo de nuevo.
Debes saber que el código tanto para texto como para imagen se debe insertar en un elemento o gadget html-javascript que encontrarás en el apartado de Diseño de tu blog.
¿Lo insertaste en un gadget y añadiste el contenido a esconder?
Jaime, hice este truquillo anoche :) Es decir... toooooda la madrugada trabajé ¡¡Pero estoy feliz !!! Me quedó precioso !! Y achiqué un montón el espacio en el sidebar !!
Pasa a verlo, pleaseeeeeee! =)
Porque tu fuiste el maestro, y si quedó bien no es solo por mi trabajo sino por tu explicación.
Al igual que a El Potro de Ciudad Blogger, la verdad que con Uds. dos yo renové todo el blog en tan solo tres semanas (y llevo dos años, nunca aprendí tanto de diseño blogger como en este último mes con Uds.)
Te cuento entre otras cosas que el truco del no copy, que tantoooo me gustaba, en realidad tuve que quitarlo, porque no se podían suscribir, ya que el teclado quedaba bloqueado :(
Pero no importa, lo tengo guardadito en mi blog de pruebas... a lo mejor, mas adelante.
¿Tienes el truco de solo bloquear el mouse?
Creo que lo ví, y no recuerdo donde está :(
Perdón por preguntar, es para no revolver todo ¿se entiende? =)
Gracias Jaime por ayudar tanto !!
Pasa a ver el diseño =) Le puse imágenes, y en cada imagen le coloqué una inscripción, un texto, y luego de esa imagen se despliega el resto de etiquetas, o banners, o botones, o links, depende que sea.
Te dejo una página para que la visites, donde yo hago todo, es un editor de textos online, en español, con algunas herramientas, todo gratuito, solo tienes que longuearte y listo, te deja subir un máximo de tres fotos juntas para que arregles, luego vas eliminando, tiene muchas posibilidades de hacer cosas, de guardarlas en diferentes formatos, en fin, investiga a gusto que está muy lindo para darlo a conocer en tu blog para aquello que como yo, no tenemos un programa en la pc para editar fotos. Este es el link: Editor de imágenes PHIXR
Ah, y puedes llevar directamente una foto desde tu busqueda de imágenes en google o yahoo, solo picas en ella con el link de esta página y la lleva. Asi que no solo desde tu pc la cargas =)
Tiene muchas más posibilidades de conexión y de transferir tu foto arreglada a otros sitios.
Muchos besos para ti !! para vos, en argentino ;)
Hola! No me funciona el código, cumplí con los pasos que mencionaste pero nada de funcionar. Probé pegándolo en el sidebar y luego en un post, y nada.
gracias
Maria Rosa, tu comentario me ha encantado. Es maravilloso leer cada una de tus palabras y ver que ¡tu blog está completamente renovado! ;).
Por supuesto que me pasaré a verlo. ¿Cómo que perdón por preguntar? ¡No hay naaaaada que perdonar! jajaja ¿Qué sería del mundo sin las preguntas? ☺.
En cuanto al truco de bloquear el teclado, es cierto que tiene unas cuantas desventajas, pero tengo el que necesitas, en el cual puedes bloquear el botón derecho del ratón (esta es la entrada). Si lo deseas, también puedes proteger las imágenes de tu blog.
El generador que me recomiendas tiene una pinta estupénda. No dudaré en probarlo (y probablemente publique una entrada agradeciéndote el descubrimiento) :D.
¡Un abrazo español para tí!
Anónimo, ¿por casualidad no tendrás JQuery implementado en tu plantilla? normalmente hay problemillas al mezclar scriptaculous con JQuery en una plantilla (o al menos yo los he tenido).
Hola! Nunca he usado JQuery, no se que es, en los códigos que he colocado en mi plantilla no aparece esa palabra. Junto al código de Scriptaculous tengo el código de thumbnailviewer.
gracias.
Anónimo, ¿Quieres decir que en tu plantilla no aparece la etiqueta </head>?
Te dejo esta entrada acerca de JQuery.
Anda, qué curioso!!!!!. Parece un poco complicado, pero me gusta!!!! Según entiendo, el script inicial es previo y se requiere para luego poder poner el enlace o el slide con la foto, no???. Que luego ponga o no esos efectos es otra cuestión, no???.
hola jaime como estás, quiero contraer y expandir las etiquetas en mi sidebar pero al poner es scriptaculous inhabilito ultimos comentarios y ultimas entradas.
hay una forma de evitar el conflicto ?
como hago ?
ya estoy pensando en sacar las ultimas entradas y ultimos comentarios de bronca nomas.
veo que en algunos blogs se pueden usar las dos opciones. y me vuelve loco la idea de no poder usarlo es un recurso buenisimo.
saludos
Cierto Laube, de hecho, puedes tener el script inicial en la plantilla (por lo que tendrás Prototype y Scriptaculous en el blog) pero no activarlo con ningún efecto.
También puedes utilizar otros efectos o trucos sin necesidad de volver a incluir el script inicial (por lo que es una ventaja).
Es algo complicado pero puedo ayudarte en todo lo que necesites.
Si te decides por aplicarlo avísame ^^.
Gracias Jaime!!!!! Siempre tan atento...
Un besote
Aprender cosas nuevas siempre es bueno Laube.
¡Abrazotes!
Me ha sido de MUCHA ayuda, gracias :D
Me alegro mucho anónimo, gracias a tí por comentar :D.
Buenisimo truco lo andaba buscando hace mucho.
Gracias jaime saludos
Me alegro entonces de que lo hayas encontrado, wwe-cv.
Gracias a ti por comentar.
Hola Jaime!gracias por tu respuesta,perdon que haya sido tan insistente!!
pude realizarlo y me sirvio muchisimo !!!muchas gracias!!
un beso
claudia :D
No hay nada que perdonar, Claudia. Preguntar es algo magnífico y con lo que se aprende de verdad (¡por otra parte, adoro responder!).
¡Abrazos!
Jaime, ¿por qué no sale la flechita negra en el ejemplo de texto con enlace? Es que sin ella parece que el blog se ha quedado en el camino en cuanto a la carga de elementos de página, no sé si entiendes. El visitante puede creer que hay no hay nada, a menos que pase el cursor por encima. Es entonces cuando digo que la flechita negra presupone "que hay algo escondido", pero a mí no me sale ¿Me ayudas?
Salu2 y gracias.
Silvia, ¿Te refieres al texto de esta entrada o al enlace que despliega contenido insertado en algún apartado de tu blog?
Lo más probable es que se deba al propio navegador. ¿Cuál utilizas? Normalmente, al desactivarse el javascript, los trucos como éste no funcionan. A pesar de ello, la flechita debería verse (siempre y cuando se haya incluido).
Por supuesto, es fundamental incluir un carácter o icono que actúe como referencia ante los lectores que deseen ver el contenido.
Hola Jaime. Gracias por tu pronta respuesta. Verás, me referia a la flechita negra de tu ejemplo, aqui mismo en este post. Yo uso Firefox y he aplicado este truco unas 3 veces, queda bastante bien, pero en mi blog no sale dicha flechita, al menos a mi. Quienes me lean ignoro si la ven o no. Me entendiste bien: hay que tener un referente ante el contenido oculto para que el visitante presuponga que "hay más".
Eso del javascript me has pillado. De eso ando pez. Espero tu ayuda como siempre.
Besos.
Silvia, prueba a realizar el truco con una imagen a modo de botón. Si la imagen se visualiza habremos dado un paso con respecto a la búsqueda del error.
Avísame si ocurre lo mismo.