Expandir y contraer partes de una entrada

http://ciudadblogger.com/2009/10/expandir-y-contraer-partes-de-una.html

12 de octubre de 2009 | Publicado por El Potro | 214 comentarios

Este truco permite esconder partes de una entrada y con la posibilidad de mostrarlos cuando el lector quiera. Se puede esconder texto, imágenes o video y sirve para ahorrar espacio cuando tenemos un elemento muy largo dentro de la entrada.
Este es un ejemplo con una imagen:

[+/-] Ver / Ocultar

Lo mismo se puede hacer para un texto:

[+/-] Ver / Ocultar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec magna justo, eu dignissim odio. Nunc aliquam laoreet diam non eleifend. Mauris vehicula, mauris vel vehicula condimentum, neque sem congue diam, nec tempor tortor erat nec massa. Duis tempus, turpis in scelerisque blandit, eros leo bibendum odio, eu faucibus turpis justo ac orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean a purus vehicula sapien viverra eleifend. Praesent et nisi massa. Duis lacinia orci ac quam posuere nec scelerisque lectus sollicitudin. Sed eget vulputate turpis. Duis cursus mollis neque quis feugiat.

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>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</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.

Por si Scriptaculous te dejó de funcionarhttp://ciudadblogger.com/2012/04/por-si-scriptaculous-te-dejo-de.html

5 de abril de 2012 | Publicado por El Potro | 152 comentarios

Desde hace un par de días a algunos les dejó de funcionar todo lo que requiere de la libreríaScriptaculous y Prototype.

Al parecer ha sido por una actualización de estas librerías que regularmente usamos desde las Librerías API de Google.

Si usas Scriptaculous y te ha dejado de funcionar busca en tu plantilla este código:

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>
<!-- Prototype y Scriptaculous-->

Y cámbialo por este:

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>
<!-- Prototype y Scriptaculous-->

Con ese cambio en el script deberá funcionar nuevamente todo lo relacionado con Scriptaculous y Prototype.

Gracias a AdelinaBasquet U.V.V.A. por el aviso.

Read more...

Spoiler para ocultar y mostrar contenido en una entrada

 Spoiler para ocultar y mostrar contenido en una entrada
http://ciudadblogger.com/2011/04/spoiler-para-ocultar-y-mostrar.html

19 de abril de 2011 | Publicado por El Potro | 232 comentarios

Algunas veces tenemos mucho contenido que agregar en una entrada pero no queremos mostrarlo todo de un solo golpe, ya sea porque no queremos que la entrada se haga demasiado larga o porque queremos que el contenido se vaya descubriendo poco a poco.
Y sí, ya antes habíamos visto cómo expandir y contraer partes de una entrada usando Scriptaculousy que le da un efecto deslizante, pero como a muchos no les gusta usar Scriptaculous vamos a ver otra forma de hacerlo usando un simple javascript que aunque no tendrá efecto alguno cumple su función muy bien, que será la de mostrar y ocultar contenido.

Puedes ver un ejemplo haciendo click en el siguiente botón.

Podemos incluir dentro cualquier cosa que se nos ocurra, ya sea una tabla, una imagen, un reproductor de audio, un video, etc.

Para usarlo en tu blog sólo basta con poner este código en una entrada cada vez que lo quieras usar:

<div class="divspoiler">
<input type="button" value="Mostrar" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = 'Ocultar'; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = 'Mostrar'; }" />
</div><div><div class="spoiler" style="display: none;">
Aquí el contenido que queremos ocultar
</div></div>

Ahí sólo tienes que agregar donde se indica el contenido que quieres ocultar. Si el botón no te gusta mucho puedes leer esta entrada para saber cómo personalizar los botones.
O bien, puedes usar un enlace de texto en lugar de un botón

Mostrar / Ocultar ▼▲

En ese caso el código a usar es este:

<div class="divspoiler">
<a href="javascript:void(0);" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" >Mostrar / Ocultar &#9660;&#9650;</a>
</div><div><div class="spoiler" style="display: none;">
Aquí el contenido que queremos ocultar
</div></div>

O si lo prefieres también puedes usar una imagen.

Ahí el código sería este:

<div class="divspoiler">
<img src="URL de la imagen" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" />
</div><div><div class="spoiler" style="display: none;">
Aquí el contenido que queremos ocultar
</div></div>

Bastante práctico y fácil de usar ¿no? Puedes agregar varios en la misma entrada sin necesidad de cambiar alguna ID ni nada de eso. Sólo procura no cambiar a la pestaña Redactar una vez que lo pongas y no modifiques los espacios del código para que funcione correctamente.

Read more...

Expandir y contraer partes de una entrada

Expandir y contraer partes de una entrada
http://ciudadblogger.com/2009/10/expandir-y-contraer-partes-de-una.html
Este truco permite esconder partes de una entrada y con la posibilidad de mostrarlos cuando el lector quiera. Se puede esconder texto, imágenes o video y sirve para ahorrar espacio cuando tenemos un elemento muy largo dentro de la entrada.
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(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</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

Read more...

Como poner un botón Spoiler en Blogger.

Para el que no sepa lo que es un spoiler y para que sirve y como se crea,aquí en unos sencillos pasos aprenderás a colocarlo en tu blog.

El spoiler tiene la función de ocultar y mostrar texto o imágenes,y es muy útil a la hora de querer reducir espacio en las entradas o solamente si quieres que el texto o la imagen solo se vea al pulsarlo.

Lo primero que necesitaremos es el código:

<div><input value="Mostrar" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Ocultar Contenido';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Mostrar Contenido';}" type="button" /><div style="display: none;">AQUI EL CONTENIDO QUE QUIERAS OCULTAR</div></div>

El texto en rojo lo puedes modificar por el texto,link o lo que quieras poner.

1. Copia el código y pégalo en la Nueva entrada en Edición de HTML en el lugar de la entrada donde quieres mostrarlo.
2. Modifica el texto a mostrar cuando pulsen y listo.

Este seria el resultado,pulsa y prueba.

Así de fácil tienes un botón en tus entradas.


http://mejoratu.blogspot.com.es/2010/09/como-poner-un-boton-spoiler-en-blogger.html 

Read more...