leer más en Blogger (expandir y contraer)

Hay varias métodos para crear un expandir y contraer elementos (ver y ocultar), por ejemplo para generar un "leer más" en entradas extensas con mucho texto o imagenes, pero sus posibles aplicaciones son muchas.

Yo utilizo uno que encontré en Vagabundia (estupendo blog con muchísima información útil para mejorar nuestros blogs) en este link puede ver el post original de donde saque el código, para JMiur son entonces los créditos por este código y nuestro agradecimiento.
Acá simplemente transcribo el código de JMiur y les cuento mi experiencia paso a paso por si les resulta útil:

leer más

PASOS:
Como siempre lo primero es salvar nuestra plantilla en Ir a Diseño ----> Edición de HTML y hacer click en Descargar plantilla completa para poder restaurarla si algo sale mal.

Siguiendo en Edición de HTML, en el encabezado del blog, o sea antes de la etiqueta </head> insertamos el siguiente código:

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

Y listo, guardamos...
Ahora vamos a la entrada en la que queremos esconder una parte para que se despliegue al hacer click en "leer más", seleccionamos la solapa Edición de HTML de la entrada y en el lugar en que queremos hacer el corte, incluímos el código:

<a onclick="return verocultar(this);" href="javascript:void(0);">leer más</a><div style="display: none;">


Al final de la entrada agregamos una etiqueta </div> para cerrar todo.

Quedaría así:



........Contenido visible...........


<a onclick="return verocultar(this);" href="javascript:void(0);">leer más</a><div style="display: none;">

........Contenido a ocultar........
</div>


ACLARACION:
Todos los cambios de edición que desees hacer en la parte de contenido a ocultar, si lo vas a hacer desde la pestaña Redactar de la entrada, (como poner texto en bold, cambiar colores, incluir imágenes , etc...) es preferible hacerlo antes de incluír los códigos de "leer más" ya que después de hacerlo en Redactar sólo verás el contenido hasta "leer más".

FIRMA:
Para colocar una firma que quede visible después de el contenido a ocultar debes incluir su código después de la etiqueta que incluímos en el paso anterior. (si la colocas antes del quedará oculta con el resto del contenido.)
ejemplo de firma:

<div style="text-align: right;"><span style="color: rgb(102, 102, 102);" >TU FIRMA</span></div>

Todo terminado quedaría así:

........Contenido visible...........
<a onclick="return verocultar(this);" href="javascript:void(0);">leer más</a><div style="display: none;">
........Contenido a ocultar........
</div>

<div style="text-align: right;"><span style="color: rgb(102, 102, 102);" >TU FIRMA</span></div>

y se vería:

........Contenido visible...........
leer más
TU FIRMA

y al desplegarlo

........Contenido visible...........
leer más
........Contenido oculto...........
TU FIRMA

Espero les haya resultado claro, cualquier duda.. escriban!
Saludos

z diseño