Este es un ejemplo con una imagen:
[+/-] Ver / Ocultar
Lo mismo se puede hacer para un texto:
[+/-] Ver / Ocultar
O incluso con un video:
[+/-] Ver / Ocultar
Primero vamos a Diseño > Edición de HTML y antes de </head> pegamos lo siguiente:
<!-- 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>
<!-- Prototype y Scriptaculous-->
Antes de pegar lo anterior verifica si tu plantilla ya lo tiene, de ser así omite ese paso.
Lo siguiente será usar el código que es el que ocultará las partes dentro de un post. Así que cuando quieras ocultar algún elemento de la entrada deberás usar este código:
<a href='#' onclick='Effect.toggle("expandir1","slide"); return false'>[+/-] Ver / Ocultar</a><div id='expandir1' style='display: none;'>Aquí va el contenido que se ocultará</div>
Toma en cuenta que donde dice expandir1 deberás cambiarlo cada vez que quieras usar este efecto, puedes modificarlos por expandir2, expandir3, etc. Lo que está en color rojo es el contenido que estará oculto, puede ser texto, imágenes, tablas, videos, etc. cualquier elemento que tengas dentro de un post podrás ocultarlo.
Vía | El escaparate de Rosa
Enlaza este blog
Suscribirse al feed
Suscribirse por e-mail
Agregar en tu iGoogle
Seguir en Twitter
Unirse en Facebook
Enviar un correo
Iconos RSS.PNG)
Música JPZ
97 comentarios:
Hola Potro.
Como siempre, excelente!
Saludos.
Jpz.-
Esto solo funciona en un post ,no se puede usar en las pestanas para ocultar fotos o enlaces que ocupen mucho espacio?
Bona: funciana para las dos,muy buen aporte potro!!!(se que funcina para las dos porque trucoteca lo tiene)
Salu2
Jpz, ojala te sea útil =)
www.bonaisima.com, no sé a qué pestañas te refieres.
Emanuel Martinez, funciona tan bien que están los ejemplos en el post ;)
hola el potro, este truco ya lo habia visto antes y lo llegue a utilizar en una entrada de uno de mis anteriores blogs, espero que a muchos les sirva, hasta pronto.
epa que bueno esta esto, ya lo puse en algunas entradas y se ve genial, como siempre excelentes trucos, gracias!!!
Hola Ascesino96, seguro a alguien le servirá. Saludos.
NO_NAME, ya tenía rato que no te leía por estos rumbos, no te pierdas tanto. Un abrazo!
Potro bonainisima se referia como para usarlo en un Gadget,esoo creo que queria decir bonainisima
Pues no porque no me funcciona ,he creado un blog de prueba y tampoco ,solo me sale esto cuando le doy a ver/ocultar http://pruebabonaisima.blogspot.com/# arriba en el gotzila browser ,no se porque potro ...me puedes ayudar ,he hecho todo al pie de la letra ,y nada
Cuando escribas la entrada verifica que estés en la pestaña Edición HTML y no en la de Redactar, a veces por esta cuestión se cambian los códigos y evita que funcione como debería.
Pues ahora me funciona en el blog de prueba en los post ,pero en bonaisima no quiere funcionar ,sera porque tengo mas codigos ahi en esa pagina ,pero no tengo este codigo repetido ,he mirado y nada ..gracias por tu ayuda
Es justo porque no lo tienes que no funciona, necesitas poner ese primer código en la plantilla para que funcione.
Saludos.
Potro ¡¡¡Excelente!!!
Al principio no me salía (me daba una rabia) hasta que me dí cuenta que donde dice expandir1 está dos veces, o sea que hay que cambiarlo luego 2 VECES: ahí estaba la falla, mi falla. Pero una vez que uno revisa lo que hizo mal... sale. =)
Gracias, gracias, gracias !!!
Quedó genial.
Ahora a ponerlo en el blog original (estaba en blog de pruebas)
Abrazos ! :)
Preguntas y dudas:
¿Como sale esto en el feed? (yo dejé el/la feed que llegue con el post completo, si utilizo este tip ¿como sale?)
Lo mismo para Facebook. Mis post van derechito a Facebook (a "notas" y a dos blogs más que tengo por feed en aplicaciones de Facebook)
Es igual no? Se expande y contrae como en el post de blogger?
A mi me interesa contraer texto, no imagenes ni videos, los textos de mis post son muy largos, siempre, por la temática del blog. Por eso quiero utilizarlo, pero me gustaría saber como se ve en las suscripciones.
Parece excelente, voy a usarlo pero... una oregunta ¿ la numeración "Expandir 1, 2, etc" se puede repetir en diferentes entradas o hay que continuarla en las entradas donde se use ?.
Hola Maria Rosa,
Como ves no es complicado, sólo es cuestión de poner el código de manera correcta y listo, no hay nada del otro mundo.
Facebook y los lectores de feed son plataformas diferentes por lo que dudo mucho que pueda verse el mismo efecto. Me parece que en tu caso te convendría más usar la utilidad de Leer más de Blogger la cual mostraría sólo la primera parte de la entrada y ocultaría lo demás.
Puedes ver cómo funciona en esta entrada de JMiur:
http://vagabundia.blogspot.com/2009/09/blogger-nueva-opcion-more-o-leer-mas.html
Saludos!
Hola Romer Riera,
Tiene que ser distinto aun cuando se traten de entradas diferentes, es decir, si ya tienes uno que sea Expandir1 entonces ningún otro código deberá tener ese nombre, de lo contrario no funcionará.
Saludos.
Pues no me trabaja ,no se si es porque tengo muchos codigos o que ,pero he tratado todo pero en bonaisima.com no me trabaja ,en las de prueva si ,parece que algo la esta bloqueando que cuando le doy pra ver lo que escribo ,me sale el signo de #...La pagina me sale asi http://www.bonaisima.com/# ,seguire intentando a ver ,no se cual es la razon ,espero solucionarlo porque es muy bueno esto
Hola Potro, ¡que tal?
Muchas gracias Por el Truco ✔.
Ciudate y saludos ☺
bonaisima.com, no sé qué sea entonces, poniendo los códigos correctamente debería salir.
pepe, gracias a ti por tu visita. Saludos!
Te paso el dato de lo que me ocurrió: Ninguno de los dos trucos me sirve, en mi caso.
Es decir, probé los dos trucos. Publiqué. En Feed o en Facebook no se puede ver lo que continúa: ya sea con el truco "seguir leyendo" o bien con el de "expander/contraer".
En mi caso en particular, donde muchos leen mis post desde Facebook o directamente del Feed, no van hasta el blog ... no me conviene.
Me encanta el truco, me resultó genial, ambos me sirvieron (este y el otro que me diste) pero realmente no puedo utilizarlo por esa razón. Una pena.
Ahora, para aquello que sus lectores van a sus respectivos blogs ¡¡Es genial !!!!
Gracias igual Potro, todo me sirve para aprender y todo lo que enseñas es importante :D
Besos !
Hola Maria Rosa,
El truco de Leer más (no este) no interfiere en cómo se muestra en el feed, se muestra completo, a menos que tú hayas configurado tu feed para que se muestre sólo una parte.
En el caso de Facebook no tengo idea para serte honesto, desconozco si el Leer más afecta la manera como se muestra.
Podrías hacer la prueba poniendo el Leer más en una entrada nueva y esperar a ver cómo se ve en Facebook.
Saludos.
Estupendo post.
Anteriormente había que modificar la plantilla. Ahora es mucho más simple de aplicar.
Se agradece el truco. Incluso, lo apliqué para ver como se vé.
Saludos.
Jpz.-
Tú sí que sabes sacarle provecho a estas aplicaciones, se ve bastante bien, así la discografía tan larga no "ensucia" el aspecto del post.
También puedes usar un ícono en lugar del [+/-] Ver / Ocultar o usar ambos.
<img src="URL de la imagen"/> Ver / Ocultar
Saludos!
Hola Potro.
Vamos a implementar alguna imagen.
Saludos y gracias.
Jpz.-
Ahora me dí cuenta que con el pegar el primer código, se fué de mi blog la lista de seguidores.
En todo caso, ya leí la alternativa que das en un post anterior.
Malditos navegadores.
Saludos.
Jpz.-
Así es, justo es el Prototype y Scriptaculous uno de los causantes de ese problema =S
Exelente Bro!!! en una de mis blogger-depresiones intenté hacerlo, busque este truco por todos lados, pero no me funcionó. Ahora ya se donde encontrarlo para la próxica recaída. jajajjaa.
Un abrazo!!!
Ponlo en práctica, eso te obligará a tener que publicar algo, mira que ya hace falta eh, jajaja.
Abrazos.
Excelente, despues de buscar como por todos lados por fin encontre uno que si me sirvió
Es estupendo que hayas encontrado la solución.
Saludos.
Excelente! Andaba buscando la manera de hacer esto. Ya quiero incorporarlo a mis blogs. Pero tengo una duda, antes de hacerlo: Tengo varios de mis posts con la opción de LEER MÁS... (mostrando solo parte del texto del post y una imagen). Si le habilito esto de mostrar y ocultar partes de la entrada en aquellos posts en donde ya les tengo LEER MÁS..., ¿podría darse algún conflicto entre ambas opciones o son perfectamente compatibles?
Gracias de antemano y saludos.
No debería haber ningún problema, o al menos nadie ha reportado algún conflicto entre el Leer más y este hack.
Cualquier cosa nos comentas.
Saludos!
HOLA POTRO SOY FANATICO DE TU BLOG ME VA DE LUJO CON TU CODIGO PERO PRODRIAS DISEÑAR UN CODIGO Q SALGA LA IMAGEN Y Q TENGA LA OPCION DE OCULTARLA PORQ EL CODIGO Q DEJASTE OCULTA LA IMAGEN LUEGO AL ASER CLICK EN VER/OCULTAR APARESE LA IMAGEN YO DESEO Q SEA LO CONTRARIO QUE PRIMERO VEAN LA IMAGEN Y Q DESPUES SI DESEAN LA OCULTEN PORFAVOR AYUDAME CON EL CODIGO GRACIAS 100 % CIUDAD BLOGGER ^^
Hola Mundo Tv,
Muchas gracias por tus comentarios, me da gusto saber que este sitio es de tu agrado.
El código sería el mismo, sólo habría que cambiar en el segundo código donde dice style='display: none;' cambiarlo por style='display: block;' con eso el elemento aparecerá cuando cargue la página y cuando el lector dé click se ocultará.
Saludos.
Cómo se hace, en la columna dode están los gadgets, para dejar sólo el título del gadget y ocultar el contenido del mismo, ya sea imagen o texto, y que sólo aparezca cuando se pulse sobre el título. Es que lo veo en otros blog y me parece superútil porque he agregao un gadget de texto muy largo y me queda todo muy pesado poprque hay que bajar y bajar y bajar para poder leer lo que tiene el gadget. Creo que me he enrollaro jeje, no se si me explico.
Hola La voz en off,
No te preocupes que te has explicado muy bien ;)
Te dejo el enlace donde Rosa tiene una excelente explicación sobre cómo expandir y contraer cualquier gadget:
http://elescaparatederosa.blogspot.com/2009/05/expandir-y-contraer-gadget-con.html
Saludos.
Buenísimo! Ya está en mi blog (:
¡Muchas Gracias!
Gracias a ti por tu visita :)
genial, lo que estaba buscando
muchas gracias!
tu blog es genial
Qué bueno que has encontrado algo útil :D
Saludos.
se puede hacer lo mismo o algo parecido en pero en la sidebar? por ej: agrego un gadjet de texto y al hacer click se puede leer todo, y asi no me ocupa mucho lugar...
Creo que esto es lo que estás buscando:
http://sitiooriginal.blogspot.com/2009/07/expandir-gadget_02.html
Hola Potro y antes que nada gracias por el post.
Verás soy el responsable de un blog y necesito poner relativamente a menudo entradas largas, por lo que me venía genial este truco. Pero por mucho que lo intento no me funciona. ¿Qué puedo hacer?
Seguramente sea porque la plantilla que me gasto es modificada (la 565 a 3 columnas =s)
Espero que puedas ayudarme. Muchas gracias.^^
Pablo Izquierdo
Quercus 4.0
Hola Pablo Izquierdo,
La plantilla no tiene que ver, o no debería.
No veo que tengas el primer código puesto en la plantilla, para que funcione es necesario tener ese código.
Saludos.
¿Como podría enseñarte ese trozo de mi plantilla y que pudieses decirme ué esta mal?
Gracias de nuevo y perdón por las molestias.
Pablo Izquierdo.
Quercus 4.0
Sólo ponlo en la plantilla, me refiere a que hagas todos los pasos que se explican en esta entrada, si no te funciona entonces no quites nada, sólo me dejas un comentario y yo reviso el código fuente de tu plantilla.
Saludos.
Efectivamente no funciona ¿?
Gracias otra vez :)
Pablo Izquierdo
Quercus 4.0
Ya veo el primer código en tu plantilla pero no veo el segundo código en alguna entrada que es donde se aplica para ocultar las partes de la entrada.
Ponlo en una entrada y dime en cuál está para poder ver el código.
Saludos.
Vale, está en las dos últimas, o al menos en la última fijo (vamos, en la primera que aparece) Pero cuando doy a ver el blo y pincho en el "+/-" me lleva a la ventana de creación de entradas ¿?
Gracias de nuevo, perdón por el lío =S
Pablo Izquierdo
Hola de nuevo Pablo.
El problema esta en la parte del código que tienes en la entrada, si te fijas debería ser así esta parte:
href="#"
Y tú lo tienes así:
href="http://www.blogger.com/post-create.g?blogID=3206750977928314280#"
Es decir, sólo debería estar el signo de gato (#)
Esto generalmente sucede cuando se pone el código y luego usamos la pestaña Redcatar.
Elimina toda esa URL (que es la de edición de entradas) y verás que funciona.
Saludos.
Dios mio Potro te debo una. Muchísimas gracias de verdad=) Y (una vez más) perdón por las molestias.
Pablo Izquierdo
Por nada, me da gusto que ya puedas usarlo sin problemas.
Saludos.
hola potro hace tiempito q no me paso porla ciudad =P muy bueno este post haci no se gasta muchos recursos mil veses mejor q el truco de "leer mas" y tbn te queria gradecer por el post d los videos random muy bueno
Hola —(•·÷[ÇRÍŠŠ_MÂÑ]÷·•)—,
Qué gusto tenerte de vuelta por esta Ciudad. Me alegra que te hayan sido útiles estas entradas.
Saludos!
Oye ya puse este truco en mi blog pero tengo un problemita, no se si ódrias checar y me digas que puedo hacer
http://ministerioflamasdefuego.blogspot.com/p/galeria-fotografica.html
lo he intentado como 4 veces pero no me sale aun
Hola FLAMAS DE FUEGO,
Lee el comentario #51 ahí está la respuesta a tu problema.
Saludos.
uuuuuuuuuuuuuuuuufffffffffffffff
salio gracias gracias. Disculpa las molestias jeje.
Ahora si puedo dsifrutar de este truco je
byebye
No es ninguna molestia. Me alegro que ya funcione.
Saludos.
Hola tengo los mismos problema que aparece en el comentario 50
Y segui la instruccion que colocaste en la 51 pero ahora es que se va directamente a la primera entrada.
Eso sólo sucede en versiones anteriores de Chrome, he entrado a cwolf.com.ar y se ve bien el efecto, no me manda arriba del blog.
Ola potro de verdad muy bueno este truco, antes tenia uno pero eera muy extenso y complejo, de verdad este me gusta mucho.
Me gustaría que cuando de Clic para expandir, el link me quede al final de la entrada para ocultar de nuevo. me entiendes?? gracias!!
No se puede, el enlace es fijo, como cualquier texto :S
Que estaré haciendo mal ahora?
Hola Potro, confiado de tu paciencia ;), te pido me colabores con los scripts ya que no los he podido implementar adecuadamente a mi plantilla.
Por ejemplo con este script para ocultar y contraer partes de post, lo he implementado sobre "/head" luego he ido a una entrada y he encerrado entre el "div" todo el contenido a ocultar, para mi sorpresa: Se oculta el contenido pero al hacer click en el enlace +/- NO EXPANDE EL CONTENIDO, si no que me lleva a el Top del blog.
Espero no ser molestia. ;P
Fruto Frívolo
ALELUYA... LO LOGRÉ.
Gracias Potro, estuve revisando el script y encontré el error que cometí... :P
Espero tengas buena salud.
Hasta un próximo error. JA.
Fruto Frívolo
Qué bueno que lo has solucionado :)
seria posible cambiar [+/-] Ver / Ocultar por una imagen?
y si es así,¿como?
Sólo cambia ese texto por el código de una imagen, en el comentario #23 hay un ejemplo.
ah,gracias potro la verdad es que soy un desastre por no mirar los demas comentarios xD
lo pruebo y te cuento ^^
Si aplico esto no se me ve la lista de seguidores x_____x
¿qué hago? perdon por mi ignorancia :(
Es porque usa Scriptaculous y no se lleva con el gadget de la lista de seguidores.
Es por eso que había escrito esta entrda, de hecho ya habías comentado en la entrada sucesiva a esa.
ya...pero es que a mi esa idea no me gusto mucho,la verdad....
por que no me gusta eso de ver la informacion desde ahi....
bueno entonces lo dejare sin eso,que remedio =( muchas gracias de todas formas potro.. ^^
porcierto,si no es mucha molestia :3 que me recomendarias ponerle a mi blog?
http://kingdomheartszone.blogspot.com/
tu que eres el maestro xD
No soy un maestro así que no sabría decirte, pero así como lo veo lo veo bien, no está sobrecargado de gadgets innecesarios.
Hola Potro, sigo trasteando mi blog y quería añadir este tip, pero creo que me da problemas con la jquery 1.4, tengo varios scripts que tiran de esa biblioteca y aunque he conseguido que funcione, cuando se ha dado ese caso el resto de efectos funcionaron mal. Uso scripts para efecto buble, shadowbox, s3slide, tabs, creo que no me dejo ninguno. Si sabes cual puede ser el problema ya sabes, gracias como siempre!
Eso es porque este efecto requiere de Scriptaculous y Prototype, esa librería no es compatible con JQuery, que es la que estás usando para los demás efectos que mencionas.
Lo suponía Potro, incompatibilidad entre librerías... no sabrás de algún otro método para hacer funcionar algo similar a este tip no? saludos!!
Hay uno con JQuery que hace lo mismo pero no funciona muy bien con Blogger, o al menos a mí nunca me ha resultado.
Bueno pues como no tenía ni idea de que existía uno que usase Jquery, buscando encontré otro método que sí me ha funcionado, te dejo el link por si quieres echarle un vistazo: Menú expandible switch
Bien, no tiene el efecto deslizante pero cumple su función ;)
Exacto Potro, por lo menos cumple jeje
POTRO AYUDA NO ME SALE MIRA MI BLOG TE DEJE UNA ENTRADA PARA QUE VEAS LO QUE ACE
http://bajandopeliculaslatinas.blogspot
Usas jQuery y no es compatible con el script que se usa para este efecto (Scriptaculous), es por eso que no funciona.
jQuery y cual es para borrarlo
Parece que lo tienes dentro de un elemento HTML/Javascript debajo de RADIO FM GOLD
no era parece bueno graxias por tu ayuda
Hola majo e intentado poner esto en una entrada pero no entiendo porque al darle me salta de nuevo a la pagina principal sabrias explicarme porque
benga gracias y un saludo
Necesitaría ver en qué blog y en qué entrada lo has puesto, pero generalmente el problema es que ponen el código en la pestaña Redactar y siempre que se trata de scripts hay que hacerlo en la pestaña Edición de HTML (junto a la de Redactar)
Saludos.
e intentau pero no lo consigo
lo e puesto,pero de la k le doy se me va para arriba del blog nuze
beno majo haber si lo consigo jijiji
garcaias
es que e estau mirando y yo no creo tener ese boton de redactar que dices
es posible u esque ando ciego jejeje
Arriba de las herramientas de texto (negrita, cursiva, color de texto, agregar imagen, etc.) hay dos pestañas, una dice Redactar y otra dice Edición de HTML, es en esta última donde debes poner el código, sino sale mal.
ya ya si hay es donde e mirau pero no me aparecen esas opciones.gracias de todos mmodos
HOLA TE CUENTO QUE HAGO LOS PASOS CON UN VIDEO, EN EL BLOG QUEDA FINA LA INDICACION PERO NO ABRE NI CIERRA...
Necesitaría ver el código puesto en tu blog para saber dónde está el problema.
Se puede poner una imagen en vez [+/-] Ver / Ocultar ?
Sólo cambia ese texto por el código de la imagen:
<img src="URL de la imagen"/>
Publicar un comentario en la entrada
Gracias por tus comentarios. Si tienes una consulta sobre tu blog deja la dirección del mismo.