Mostrar post expandibles (Peakaboo View)

Actualización: Blogger ya provee una forma nativa de implementar los resumenes de artículos, por favor referirse a laayuda de blogger. Si bien el hack que aquí se describe permite lograrlo también, al ya haber una forma natural de hacerlo, es preferible utilizar ésta que moverle al código.

Escrito originalmente por Ramani, en su blog Hackosphere. El ejemplo de su uso en este blog lo pueden ver aquí.

La página principal de tu blog generalmente muestra todo el contenido de cada unos de tus posts. Si estos son mayores a 2 párrafos, tus visitantes se verán en dificultades para encontrar rápidamente algún tema de interés para ellos dado que van a necesitar desplazarse hacia abajo en la página. Aquí es donde los post con resúmenes expandibles ayudaban en el viejo blogger. Este hack sirve al mismo propósito para el nuevo blogger y aún más! Esto es, la página principal sólo mostrara los resúmenes de los posts y cuando den click en "leer más", el post completo aparecerá en la página principal (vista Peekabo)!! He recibido algunas solicitudes para crear dicho hack y me las he arreglado para echarlo a andar. Más tarde, Hans lo mejoró agregando una liga para "Mostrar Resumen" con el cual se puede colapsar nuevamente un post expandido para mostrar sólo el resumen. Juntos, también hicimos que la liga "Leer Más" se mostrara únicamente para aquellos posts que tienen resumen. Este es un hack fantástico, pero necesitas tener cuidado al modificar tu template. Si no estás familiarizado con HTML, recomiendo de sobremanera que obtengas ayuda de alguien que lo conozca mientras aplicas este hack. Aquí están los pasos a seguir.

Paso 1.

Encuentra la etiqueta </head> en tu template y agrega todo el código que se muestra a continuación antes de ella.

<b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">

var fade = false;
function showFull(id) {
 var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 if (fade) {
                    spans[i].style.background = peekaboo_bgcolor;
                    Effect.Appear(spans[i]);
                } else spans[i].style.display = 'inline';
             }
             if (spans[i].id == "showlink")
                 spans[i].style.display = 'none';
             if (spans[i].id == "hidelink")
                 spans[i].style.display = 'inline';
        }
}


function hideFull(id) {
 var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 if (fade) {
                   spans[i].style.background = peekaboo_bgcolor;
                   Effect.Fade(spans[i]);
                 } else spans[i].style.display = 'none';
             }
             if (spans[i].id == "showlink")
                 spans[i].style.display = 'inline';
             if (spans[i].id == "hidelink")
                 spans[i].style.display = 'none';
        }
        post.scrollIntoView(true);
}

function checkFull(id) {
 var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        var found = 0;
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 spans[i].style.display = 'none';
                 found = 1;
             }
             if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
                 spans[i].style.display = 'none';
        }
}

</script>
<style>
  #fullpost {
    display:none;
  }
</style>
</b:if>

N. de Tr. La imagen previa muestra la ruta para acceder al HTML del template. Considerar hacer un respaldo del template previo a su modificación, seleccionando la liga Download Full Template. Idealmente, a efectos de probar cambios que puedan alterar el diseño o funcionalidad de nuestro blog, crear un blog de prueba.

Paso 2

N. de Tr. Para poder encontrar el Includable en el template será necesario palomear el checkbox con la leyenda Expand Widget Templates como se aprecia en la imagen. La ubicación dependerá de la plantilla que hayamos seleccionado para nuestro blog. La advertencia aplica para el caso mostrado en la imagen, lo que aplica es simplemente agregar lo que está en rojo e ignorar los códigos previos, que podrán variar de acuerdo a la plantilla de nuestro blog. De acuerdo a nuestras preferencias, podemos también cambiar las leyendas Read More y Summary Only para que indiquen lo que al gusto de cada quien convenga.

Encuentra el includable llamado 'post' y copia y pega los cambios mostrados en rojo de lo que se muestra a continuación (Debes tener mucho cuidado para evitar errores. Date cuenta que la palabra "uncustomized-post-template" puede no aparecer en tu template, pero no hay problema por ello.):

<b:includable id='post' var='post'><div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
lt;b:if cond='data:post.title'>
 <h3 class='post-title'>
 <b:if cond='data:post.url'>
   <a expr:href='data:post.url'><data:post.title/></a>
 <b:else/>
   <data:post.title/>
 </b:if>
 </h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
 <b:if cond='data:blog.pageType == "item"'>
   <p><data:post.body/></p>

<b:else/>
        <style>#fullpost {display:none;}</style>
        <p><data:post.body/></p>
        <span id='showlink'>
          <p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Leer Más...</a></p>
        </span>
        <span id='hidelink' style='display:none'>
          <p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Sólo Sumario...</a></p>
        </span>
        <script type='text/javascript'>
          checkFull("post-" + "<data:post.id/>");
        </script>
     </b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->                        

Para encontrar el Includable, puedes hacer una búsqueda por el término id="post". Si no te es posible encontrarlo, posiblemente no hayas expandido el template. Selecciona el checkbox con la etiqueta "Expand Widget Templates", que se encuentra justo arriba del código del template, para expandir este y mostrar más código.

Paso 3

Selecciona la pestaña Settings->Formatting (Cofiguración/Formato), hecho lo cual encontrarás en la parte inferior un cuadro de texto para que especifíques el "Post Template" (Plantilla de entrada). Copia y pega estas líneas a dicho cuadro de texto y guarda la configuración. (Por favor NO las teclees tu mismo dado que pudiera se que se introduzcan algunos espacios que causen que la funcionalidad se pierda).

Escribe tu resumen aquí.
<span id="fullpost">
Escribe el resto de tu post aquí.
</span>

Ahora cada que crees un nuevo post, se te va a indicar claramente dónde debes escribir el resumen y dónde agregar el resto del post. Es importante asegurarse de que la etiqueta </span> mostrada arriba se encuentra al final de tu post. Para asegurar esto, utiliza la pestaña "Edit HTML" (Edición HTML) en lugar de la pestaña "Compose" (Componer) cuando escribar tu post. Después de teclearlo, puedes regresar al modo "Compose" y modificar la tipografía y colores. Cabe mencionar que también puedes dividir algunos (o todos) tus posts anteriores para que tengan un resumen, para lo cual tendrás que editarlos. La liga "Leer más" aparecerá sólo para aquéllos posts que se hayan dividido de esta manera.

N. de Tr. Se agregó imagen para mostrar donde se debe realizar el cambio.

Esto es lo que Ramani pide a cambio:

Si estás visitando mi blog por primera vez, no te pierdas de otras cosas interesantes que ofrezco:

• Un blog de tipo Digg para compartir y promver tu blog - bvibes.com
• Un template bastante rápido basado en AJAX - Neo

Notas Importantes:

• Nota 1: Por favor no olvides agrear una liga a Hackosphere en tu sidebar. Eso es la única cosa que espero a cambio :)
• Nota 2: Si quisieras incorporar algunos efectos especiales de aparecer/desaparecer para este hack, lo puedes tener incorporando unos cuantos cambios descritos en este otro post.
• Nota 3. Si quisieras que la liga "Leer más" te llevara a la página del post en ligar de expandirlo en la página principal, utiliza este otro hack.
• Nota 4. Si seleccionas la liga "Entradas anteriores", la liga "Leer más" pudiera aparecer aún para aquellos posts para los cuales no se ha incorporado el hack. Este es un problema conocido aún sin solución.