Dos formas distintas de poner excerpts (leer más) en Blogger
Hay varias formas de poner excerpts en Blogger, y no todas funcionan del mismo modo. Quise probar tres formas distintas de hacerlo (aunque me quedé con dos), creando demos por separado para mostrar las diferencias. He tratado de simplificar al máximo las instrucciones originales para facilitar la tarea.
Forma 1
Es objetivamente mejor que la anterior. La compartió Rosa en su Escaparate hace más de un año, y se trata de un “leer más con resumen”. Mira el demo AQUÍ.
Ventaja: “Leer más” se añade sólo en las entradas que elegimos.
Paso a paso:
a) Expandir los artilugios y añadir justo antes de </head>:
<script type='text/javascript' src='http://girlyblogger.site90.net/hackosphere.js' />
b) Buscar la siguiente línea antes de post-header-line-1:
<div class='post hentry uncustomized-post-template'>
Y reemplazarla por:
<div class='post' expr:id='"post-" + data:post.id'>
c) Justo debajo de <div class=’post-header-line-1′/>, ubicar estas dos líneas:
<div class=’post-body entry-content’>
<data:post.body/>
Reemplazarlas por:
<div class='post-body' expr:id='"post-" + data:post.id'>
<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 expr:onclick='"javascript:showFull(\"post-" +
data:post.id + "\");"'
href='javascript:void(0);'>
Leer más...
</a>
</p>
</span>
<span id='hidelink' style='display:none'>
<p>
<a expr:onclick='"javascript:hideFull(\"post-" +
data:post.id + "\");"'
href='javascript:void(0);'>
</a>
</p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>")
</script>
</b:if>d) Guardar los cambios.
e) Para postear una entrada, hacerlo del siguiente modo:
TEXTO A MOSTRAR <span id="fullpost"> TEXTO A OCULTAR </span>
Forma 2
Este método es distinto a los anteriores. Acorta todos los posts en un mismo punto, por lo que es ideal para plantillas tipo “revista”. Lo vi en una plantilla “made in Brasil”, y lo encontré luego en el blog de Amanda de Blogger Buster, bajo el título “Elegant Post Summaries for Blogger with jQuery“. Puedes ver el demo AQUÍ.
Paso a paso
a) Pegar justo antes de <head>, al inicio de la plantilla:
<script language='javascript'
src='http://girlyblogger.site90.net/jquery-1.2.3.pack.js' type='text/javascript'/>
<script language='javascript'
src='http://girlyblogger.site90.net/jquery.expander.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('.excerpt').expander({
slicePoint: 280, // punto de corte
expandText: '[...]', // por defecto es 'read more...'
});
});
</script>*El “punto de corte” es el número de caracteres que queremos mostrar.
b) Buscar:
<div class=’post-body entry-content’>
<data:post.body/>
<div style=’clear: both;’/> <!– clear for photos floats –>
</div>
Reemplazar esas cuatro líneas por este código:
<b:if cond='data:blog.pageType != "item"'>
<div class='excerpt post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/>
</div>
<a expr:href='data:post.url'>Seguir leyendo...</a>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/>
</div>
</b:if>c) Guardar los cambios.
d) Si queremos que el “Sigue leyendo…” aparezca justo al lado del texto, en vez de abajo, simplemente en el código del paso b reemplazar los “div” por “span”.
NOTA: Había realojado los scripts en Boxstr, pero lamentablemente no anda bien. Mientras busco una alternativa, dejo los links originales que sí funcionan. De todas maneras, siempre es recomendable realojar los scripts, porque eventualmente podrían dejar de funcionar.
ACTUALIZACIÓN (17/12/08): Realojé los scripts en 000Webhost. Espero que ahora sí funcione perfecto. Probé es Firefox e IE; en IE las entradas tardan fracción de segundo en mostrarse (lo mismo que tarda en cargarse cualquier página), pero es algo muy menor.
Los scripts están disponibles para descargar aquí, en caso de que fallara el hosting de nuevo. También hice la prueba en SkyDrive, pero no funcionan en IE.
