Ocultar posts largos o el famoso "Leer más..."

Vamos a ver como hacer resumenes de entradas o también llamadas entradas expandibles, ocultar entradas o el famoso "Leer más..." en blogger.
Para hacer esto existen muchos métodos, obviamente todos con sus ventajas, desventajas y facilidades, en este post veremos dos que son los que más me gustaron, uno es el que plantea Google y es el más común y el otro es con Javscript.

1.- "Leer más" de Google.

Antes que otra cosa, esta es la referencia de donde lo hice:
http://www.google.com/support/blogger/bin/answer.py?hl=es&answer=42215

Ahora lo que pasará con este método es que todas las entradas tendrán un link que diga "Leer más..." (o lo que uno quiera) al final y que al darle clic se abrirá la página individual del post (post completo), el contenido que se puede recortar es el que nosotros queramos.

Hay que ir, dentro del panel de administración de Blogger y de ahí a Diseño > Edición HTML y activaremos la casilla de Expandir plantilla de artilugios, y antes de la etiqueta <data:post.body> copiar el siguiente código:

<b:if cond='data:blog.pageType == "item"'>
<style>span.fullpost {display:inline;}</style>
<b:else/>
<style>span.fullpost {display:none;}</style>
</b:if>

Y justo después de la misma etiqueta (<data:post.body>) copiar lo siguiente:

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>Leer mas...</a>
</b:if>

Guardamos la plantilla y ya están las configuraciones de la plantilla, hay que verificar que este código este en cada plantilla que usemos.

Cortar el texto en los posts.

Al momento de redactar una nueva entrada colocaremos entre las siguientes etiquetas el texto que queramos ocultar:

<span class="fullpost"></span>

Por ejemplo:

Este es el inicio del post, aqui hablaremos de muchas tonterias que pasan en el mundo <span class="fullpost"> Y esto estará oculta hasta dar clic en el link de Leer más...</span>

2.- Usando Javascript.

Lo que pasará con este método es que el texto que ocultemos se desplegará y ocultara por medio de CSS y la propiedad display, así que cuando demos click en el link de ocultar/mostrar la función de Javascript se encargará de activar el CSS correspondiente. El método pasado usa las mismas dos propiedades, así que es un método parecido.

Bueno pero para no hacer tantas bolas mejor, manos a la obra.

Tenemos que editar la plantilla y crearemos las dos clases de CSS que desplegarán y ocultarán el texto:

.hide {display:none}
.show {display:inline}

Eso lo pondremos donde se encuentren todas las definiciones de CSS de la plantilla, antes de la etiqueta "]]></b:skin>".

Ahora hay que crear la función de Javascript. Después de la etiqueta "]]></b:skin>" y antes de </head> escribir lo siguiente:

<script type='text/Javascript'>
function hideshow (postid) {
var post = document.getElementById(postid);
if (post.className=="show"){
post.className="hide";
} else {
post.className="show";
}
}
</script>

Guardamos la plantilla, y para usar el ocultamiento en la edición de los posts, habrá quehacer lo siguiente:

Crear el link para ver/ocultar:

<a href="javascript:hideshow('idx')">Ver/Ocultar</a>

Poner el texto a ocultar:

<div class="hide" id="idx">
Texto a ocultar
</div>

NOTA IMPORTANTE: La ventaja con este método es que se pueden ocultar desde pequeños fragmentos de posts hasta la mayoría de el, y se pueden crear varios segmentos ocultos. Lo único que hay que cambiar es el idx, que puede ser id1, id2, identificacion1, arg1 etc, es decir, idx lo podemos llamar como queramos, el único requisito es que sea un nombre único dentro del blog. ¡OJO!, dije dentro del blog, así que debe ser un id único (como se supone que deben ser todos los id ¬¬ jeje).
Y hay que recordar que por cada elemento oculto hay que crear un link y un uso de div que contendrá el texto oculto.

Este método lo saque de http://ayudaparatublog.com/como-puedo-mostrarocultar-mis-entradas-modo-peek-a-boo-classic-blogger/