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.

Mostrar y ocultar - Expandir y contraer cualquier cosa en el blog

El truco de expandir y contraer elementos suele ser bastante apreciado en el mundo del blogger, ya que resulta de bastante utilidad para acortar alguna entrada, evitar que el blog tarde en cargar, hacer una navegación más cómoda...

Nosotros hemos aprendido a expandir y contraer las entradas en las páginas de etiquetas [+], a hacer que el contenido de los gadgets (elementos de página) pueda desplegarse o recogerse [+] o a conseguir un efecto deslizante que muestra u oculta cualquier elemento [+].

Pero en esta entrada aprenderemos el truco de "expandir y contraer" básico, el más sencillo y el que mejor suele adaptarse al tiempo de carga de un blog.

Aunque después veremos algunos ejemplos, vamos a empezar la instalación.


Diseño>Edición de HTML>expandimos artilugios




Texto oculto con enlace para visualizarlo

Busca la etiqueta </head> y añade este script encima:

<script type='text/JavaScript'>
function blmostrocult(blconted) {
var c=blconted.nextSibling;
if(c.style.display=='none') {
c.style.display='block';
} else {
c.style.display='none';
}
return false;
}
</script>

Ahora guarda la plantilla:



Dirígete al lugar en el que deseas insertar el enlace "mostrar - ocultar", ya sea una entrada o un gadget (elemento de página) que encontrarás en el apartado de Diseño.

Este es el código que vas a necesitar siempre que desees hacer uso del truco:

<a onclick="return blmostrocult(this);" style="cursor: hand; cursor: pointer;">TITULO</a><div style="display: none;">
CONTENIDO OCULTO
</div>

Simplemente debes reemplazar TITULO por el texto que llevará el enlace y CONTENIDO OCULTO por el texto, la imagen o cualquier cosa que desees ocultar.

Al ser tan sencillo y rápido, este truco puede usarse para infinidad de cosas. Seguidamente puedes ver algunos ejemplos...

- Un ejemplo con texto

Este es el texto que permanecerá oculto antes de que el lector pulse sobre el enlace. Como puedes ver, resulta de mucha utilidad el poder recoger secciones del blog. Escribir un mensaje, una advertencia o simplemente dividir tus artículos para que tu bitácora cargue con rapidez sería una idea magnífica.


- Un ejemplo con imágenes




Texto visible con enlace para ocultarlo

Probablemente lo que desees no sea mantener el contenido oculto y que, al hacer clic en el enlace, quede visible. Puede que prefieras mantener un texto a la vista y que, si el lector lo desea, pueda ocultarse...

- Ocultar el texto

Este es el texto que permanecerá visible antes de que el lector pulse sobre el enlace y lo oculte. Como puedes ver, resulta de mucha utilidad el poder recoger secciones del blog. Escribir un mensaje, una advertencia o simplemente dividir tus artículos para que la bitácora cargue con rapidez sería una idea magnífica.


Para ello, utiliza este script en lugar del anterior (insertándolo en el mismo lugar):

<script type='text/JavaScript'>
function blmostrocult(cual) {
var c=cual.nextSibling;
if(c.style.display==&#39;block&#39;) {
c.style.display=&#39;none&#39;;
} else {
c.style.display=&#39;block&#39;;
}
return false;
}
</script>

Y este otro código para activar el truco:

<a onclick="return blmostrocult(this);"><span style="font-style: italic;">OCULTAR</span></a><div style="display: block;">
CONTENIDO
</div>

Reemplazando OCULTAR por el texto del enlace y CONTENIDO por el texto, imagen o artilugio.

Notas:

Para no tener que estar copiando el código que inserta el enlace para expandir y contraer secciones del blog, haz uso de la plantilla de entrada ofrecida por blogger.

En caso de querer utilizar una imagen o un botón como enlace para desplegar o recoger elementos, reemplaza en el segundo código, TITULO por este código:

<img src="URL DE LA IMAGEN"/>


En donde dice URL DE LA IMAGEN, inserta la dirección del icono [+].

Marcus dice...

Hola Jaime!
Que quiere decir eso de cambiar la confuguración de los comentarios?
Como puedo hacerlo?
Gracias.

Jaime Trujillo Escobedo dice...

Hola Marcus!

Básicamente es cambiar la forma en la que los lectores pueden comentar.

Ya sea usando un formulario de comentarios incrustado bajo las entradas, uno en ventana emergente o uno en página independiente, los lectores podrán comentar de la misma manera.

Puedes hacerlo de manera sencilla dirigiéndote a Configuración > Comentarios y seleccionando las opciones que mejor se adapten a tu blog, como la Ubicación del formulario de comentarios.

Karla dice...

Hola Jaime :)

Tienes muy buenos posts, ahora eres de mis favoritos, y como te dije antes me gusta como explicas... ya estoy suscrita a tu blog!

Me gustaria implementar algunas cosas que he visto en alguna de las plantillas, lo de los scrips bueno, solo lo puedo hacer cuando se incluye en script en la plantilla, por el asunto de la banda ancha...

Disfruto mucho centrarme en lo estetico de las plantillas, pero me gustaria agregar mas efectos como el de las galerias etc... ojala tenga mas tiempo para llevarlo a cabo (que es mi mayor problema)...

Saludos y

Gracias por compartir!

Disculpa los acentos que me comi pero mi teclado no esta habilitado en este momento....

Deybi dice...

Hola Jaime :D
Esto es muy interesante. Tendremos que ponernos también a hacer un par de pruebas.
Saludos :P.

Jaime Trujillo Escobedo dice...

Hola Karla! Es todo un honor para mi el tenerte como suscriptora.

¿Deseas introducir los scripts en tu blog o en las plantillas que diseñas?

Si es así, puedo ayudarte con el hosting de archivos. Google sites es un buen sitio para alojar scripts y funciona correctamente.

Compartir es algo magnífico ^^.

Por cierto, le di un vistazo a tus plantillas y ¡son verdaderamente bonitas!

Abrazos ;).

Jaime Trujillo Escobedo dice...

¡Deybi! Así es, el script es muy simple y fácil de entender por lo que instalarlo resulta muy cómodo.

Simplemente es necesario hacer pruebas para comprobar la infinidad de usos que nos puede aportar ;).

¡Abrazos!

Happycreations dice...

Hola Jaime, como hago para que un blog sea independiente de otro, por ejemplo que los datos personales no sean iguales

Jaime Trujillo Escobedo dice...

Happycreations, ¿Te refieres a tener varios blogs con un perfil de blogger distinto? Me temo que la única forma de hacer eso es creando una nueva cuenta en blogger.

Por otra parte, puedes escribir tus datos personales en una entrada para cada blog y dejar "en blanco" el perfil de blogger ;).

Happycreations dice...

Graciassssssss, ok lo que debo de hacer es hacerlo por medio de una entrada, pero me gustaria que aparezca justamente donde iba el de blogger..se puede hacer eso ???? y como????, te agradezco un monton, te cuento que estoy esperando desde el viernes que me di cuenta de lo que habia pasado, asi que muchas graciassssssssss, me pegas una gran salvada byeeee

Jaime Trujillo Escobedo dice...

Happycreations, ¿Qué quieres decir con "justamente donde iba el de blogger"? No entendí bien tu pregunta.

juan dice...

¿Y si quiero que aparezcan sin contraer pero con el "enlace" para poder contraerlos en cualquier momento?
Seria de utilidad para banners publicitarios, por ejem.
gracias.

Jaime Trujillo Escobedo dice...

Juan, revisa la entrada ya que he incluido la explicación que justamente buscabas.

Si tienes alguna duda consúltame.

Cocofansclub dice...

Jaime! mis msjs parece ser que no entran???
saludos!!
clau

Jaime Trujillo Escobedo dice...

Claudia, ¿Te refieres a los comentarios? Si es así, debes saber que cada uno de ellos está en mi Escritorio de blogger. Tengo activado la moderación de comentarios por lo que los publico y respondo al mismo tiempo.

Con los estudios estoy retrasándome al responder dudas (algo que pronto acabará) pero desde que tenga el suficiente tiempo podré contestarte a cada una.

¡Saludos!

Negrevernis dice...

Hola de nuevo, Jaime.

Verás, he usado este truco en el footer del blog (lo tengo dividido en tres columnas), pero hay en uno de los widgets donde no me funciona: he puesto la imagen de una flecha (bien), pero a la hora de pinchar sobre ella, no es extiende lo que oculta (el feedjit de los visitantes).

El truco me funciona en todo lo demás: sólo falla aquí.

Lo he intentado hacer desde la plantilla de HTML, en este widget en concreto, pero entonces se me descolocan las tres columnas del footer.

Te agradecería tu ayuda en este caso concreto.

Un saludo.

Jaime Trujillo Escobedo dice...

Negrevernis, veo que la flechita muestra el contenido correctamente. Prueba a incluir el código de Feedjit en el gadget 'Estoy en:' o utilizando otro elemento html-javascript (puedes titularlo estadísticas) y aplicando el mismo truco.

Nota: no introduzcas este código en la plantilla, debes hacerlo en el campo de texto del gadget.

Negrevernis dice...

Hola otra vez, Jaime.

Pues la cosa no prospera. He puesto este gadget de Feedjit con el truco que explicas aquí en otras partes del footer y no "reacciona". ¿Tal vez es que hay algo en el código del Feedjit que anula este truco?

Gracias de antemano.

Un saludo.

Jaime Trujillo Escobedo dice...

Es muy probable que así sea, Negrevernis. Si el truco funciona con los botones y el gadget de archivos debería hacerlo también con el widget de feedjit.

Por otra parte existe Histats, un recurso muy similar que ofrece datos más especificativos con respecto al tráfico en el blog.

KatoGd dice...

Hola Hermano! Es grandioso este blog me ha ayudado demasiado ahora necesito, un gran favor.. Un truco similar para ocultar cualquier Widgets??.. He encontrado uno en google pero no funciona o mejor no explican detalldamente puedes ayudarmee?.. :D

Jaime Trujillo Escobedo dice...

KatoGd, espero que este otro truco te sirva. Oculta los gadgets y muestra únicamente el título, que despliega el contenido al hacer clic.

KatoGd dice...

Miles de Gracias, Excelente! :D..
Queria comentar porq este blog me encanta, Su sencillez! :)

Jaime Trujillo Escobedo dice...

¡Me alegra mucho que te guste, KatoGd! Espero que la instaación de los trucos se haga más sencilla con las indicaciones que doy.

Yesid Ariza dice...

Saludos,

Agradezco la información, sin embargo, el truco no funciona en mi blog www.yesidariza.blogspot.com, qué aspecto estaré dejando de considerar?. Puedes ayudarme?

Jaime Trujillo Escobedo dice...

Hola Yesid. ¿Podría preguntarte el nombre de la plantilla que estás utilizando? A simple vista no puedo asegurarlo pero diría que utilizas una de blogger antiguo y por tanto este truco no es compatible.

Alex494 dice...

Gracias Jaime por esta entrada, me ha resultado muy util para poner los botones de enlace.

GRacias

Jaime Trujillo Escobedo dice...

Estoy seguro de que le has dado un magnífico uso, Alex494. Gracias a ti por el comentario.

Nicolas M. dice...

Hola, muy buen post. Ahora me gustaria saber si es posible ocultar y desplegar todas las entradas del blog. Como por ejemplo tener un boton bajo la cabecera del blog que al hacer click en el despliegue las entradas del blog como se mostrarian normalmente al entrar a un blog.

Esta duda surge porque hay una plataforma( wix) que permite hacer sitios en flash y tener un embed del sitio completo. Donde lo integre a la cabecera de mi blog y funciona perfecto como pagina estatica, pero me gustaria que el ingresar a mi blog se vierna solo esa pagina y luego si el visitante quisiese, diera click el un boton y desplegara todo el blog bajo ella.

ojala me puedas ayudar
de ante mano muchas gracias

atte
nicolas montes

Jaime Trujillo Escobedo dice...

¡Bienvenido Nicolas Montes! Estiendo a la perfección tu consulta y me gustaría decirte que ya estoy preparando la entrada. En breve dispondrás de un tutorial para conseguir lo que buscas.

teofermi dice...

Gracias por esta entrada Jaime, buscaba algo asi, asi que lo he puesto en mi sidebar y he recogido bastante cosas, ademas dices que acelera la carga del blog?
si es asi pues mas genial todavia
solo me falta perfeccionar lo del boton que le he puesto..
te mando un beso

Jaime Trujillo Escobedo dice...

Efectivamente teofermi. Al manter artilugios ocultos, ya sea en la sidebar o en una entrada, evitaremos que el blog se demore al cargar contenido.

Por cierto, ¿Te refieres al botón de enlace?

Abrazos.

Celso Pareja-Obregón López-Pazo 1956 dice...

Hola Jaime perdona mi torpeza, me gustaría ocultar-expamdir un Gadget en mi Blog Casos Clínicos y no puedo hacerlo tal como tu indicas.
Muchas gracias.
Mi página es CASOS CLNICOS

Jaime Trujillo Escobedo dice...

Celso, necesito una explicación amplia acerca del error o inconveniente que evita el correcto funcionamiento del truco pues resulta extraño que el script deje de funcionar en plantillas como la tuya.

Cocofansclub dice...

Jaime te extraño tanto!no se si lees los mensajes, te dejo mis saludos!

Ayelen Amaya dice...

Muy bueno el truco.

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