Añadir "Leer más" o read more en Blogger

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 hace algunas cosas más!

Esto es, la página principal sólo mostrará 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 un enlace para "Mostrar Resumen" con el cual se puede colapsar nuevamente un post expandido para mostrar sólo el resumen. Juntos, también hicimos que el enlace "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 0.

¡IMPORTANTE!

Descarga y graba tu plantilla (template), de modo que puedas volver atrás si tienes algún problema con este truco.

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>




Paso 2.
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 y tampoco debes añadirla):

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<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 -->
</div>




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 encima del código del template, para expandir éste y mostrar más código.

N. de Tr. Para poder encontrar el Includable en el template será necesario pulsar 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.

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 vez 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 de HTML) en lugar de la pestaña "Compose" (Redactar) cuando escribar tu post. Después de teclearlo, puedes regresar al modo "Redactar" 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. El enlace "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 dónde 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.

Escrito originalmente por Ramani, en su blog Hackosphere.

Traducido por: Amox con pequeñas modificaciones.

El ejemplo de su uso en el blog lo pueden ver aquí.