Ocultar y Expandir parte de una Entrada en Blogger

Este truco nos permite ocultar texto, códigos, videos, imágenes, en una parte de la entrada, con la posibilidad de que los lectores de nuestro blog puedan expandirlas en el momento que lo necesiten.

Este truco lo puedes aplicar en entradas que son demasiado largas, así ahorrarás espacio y tu entrada no se verá interminable para el lector. Además ponerlo en tu blog es muy sencillo y demasiado fácil, veamos estos ejemplos del truco en acción:

Ejemplo con imagen:
[+/-] Ver / Ocultar

Ejemplo con texto:
[+/-] Ver / Ocultar

Lorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium.

Ejemplo con código:
[+/-] Ver / Ocultar


#comments-block .avatar-image-container img {
border:1px solid #CCCCCC;
float:right;
}


Ejemplo con video:
[+/-] Ver / Ocultar

Dirígete a Diseño > Edición de HTML y justo antes de </head> pegamos el siguiente código:


<!-- 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-->


Es posible que ya tengas este código en tu plantilla, verifícalo si lo tienes salta este paso.
Ahora toca poner el código que oculta los elementos en la entrada, este código lo tienes que utilizar cada vez que apliques este truco en los post. Copia el siguiente código y pégalo en tu entrada en Edición de HTML No en Redactar:


<a href='#' onclick='Effect.toggle("expandir1","slide"); return false'>[+/-] Ver / Ocultar</a><div id='expandir1' style='display: none;'>Aquí pega el contenido que quieres ocultar</div>


Nota: Cada vez que utilices este efecto tienes que cambiar lo que está en verde "expandir1" que es el id del <div> y tiene que ser diferente cada vez que lo utilices por ejemplo: expandir2, expandir3, expandir4, etcétera.
Lo que está en color azul cámbialo por lo que quieres ocultar, ya sea texto, códigos, imágenes, videos, o  lo que quieras ocultar en tu entrada.

Vía | CiudadBlogger