Dos formas distintas de poner excerpts (leer más) en Blogger

Tutoriales Publicado por Claudia en diciembre 6, 2008

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='&quot;post-&quot; + 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 != &quot;item&quot;'>
<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.

Tags:
Compártelo!
127 Comentarios en Dos formas distintas de poner excerpts (leer más) en Blogger
  1. MurvoC dice:

    hola la informacion que presentas esta excelente pero como habemos muchos novatos en esto quisiera que dieras una explicacion mas detallada claro si no es mucho pedir ya que me interesa mucho ese tema por ke he creado un blog para compartir software y pues las entradas quedan muy grandes y me seria de mucha ayuda eso de leer mas , espero puedas apoyarme si es ke no te encuentras muy ocupada, el blog que acabo de abrir se llama http://www.latierraafull.blogspot.com.
    que tengas buen dia y espero respuesta :D

    PD. no he podido encontrar los codigos que pides para poder meter los que pusiste :(

  2. Claudia dice:

    MurvoC:
    Puede ser que no encuentres los códigos por las comillas, que no están bien puestas. Si buscas parte de cada código con el buscador de tu navegador, seguro los encuentras sin problemas ;)
    De todas maneras, revisa estre otro post: Leer más en Blogger… ¡al fin!

    Saludos!

  3. Jose B. dice:

    Hola claudia,mira mi problema es este acabo de instalar unba nueva plantilla a un blog,todo hiba a bien hasta que en cada post,en la parte derecha,me aparece,”Seguir leyendo” pero en ingles,( Read rest of entry) y yo quiero ponerlo al español,soy todavia novato en esto,lo unico que encontre, fue: return strx+’…’; que seria lo que aparece al cortar,el post, (…) pero de ahi a mas no tengo idea,podrias ayudarme? :$

  4. Claudia dice:

    José:
    En la edición de HTML, expande los artilugios y busca el texto que quieres cambiar, usando el buscador de tu navegador ;)

  5. Darío dice:

    Hola, intenté de varias formas realizar excerpts, pero de aquí seguí exactamente la primera opción y al intentar actualizar me da el error de:

    No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The element type “div” must be terminated by the matching end-tag ”

    Podrías decirme cómo solucionarlo?

  6. Claudia dice:

    Darío:
    El mensaje de error te dice que tengas cuidado con el cierre de las etiquetas “div” ;)

  7. Darío dice:

    De acuerdo Claudia, pero no me deja grabar los cambios y por ende, no resulta el resumen.

    Sabés de algún código de cierre que me esté faltando¿?

    Abrazo.

  8. Claudia dice:

    Darío:
    No sabría decirte dónde estás haciendo mal el cierre (tendría que estar en tu blog).
    Creo que lo más práctico, es utilizar la función “Leer más” que Blogger incorporó de manera nativa hace unos meses. Te aseguro que da menos dolores de cabeza ;)

  9. wasa.05 dice:

    Claudia, no se que pasa pero el sigue leyendo aparece hasta el último de el post, osea aparece deoquis,, igualmente en tu demo, aparece igual, que fue lo que paso?

  10. elcore21 dice:

    hola mira tengo un problema no me funciona el leer mas y antes me funcionaba bn… importe la plantilla a otra pagina blog.. y me funciono q puede ser?

  11. rafael dice:

    muchisimas gracias el segundo me sirvio te invito ami blog eres una genio impresionante muchas gracias

  12. rafael dice:

    hoye pense que si me iba afuncionar porque si salia seguir leyendo pero no me oculta el texto ¿porque?

  13. adonay dice:

    Pues lo intenté de la primera forma, pero el código:

    no lo encontré.
    La segunda se me complicó aún más, no hay otra forma???

    Gracias

  14. anonimo dice:

    hola chicablogger, estaba intentando hacer este tutorial en mi blog y se me ha repetido post y me sale leer mas…
    que puedo hacer?
    mi blog en link sitio web
    se agradece ayuda no consigo poner nada de leer mas en la página principal pero si los tengo en las siguientes páginas

  15. David dice:

    muchas gracias

    se te agradece

    la primera forma es la que me funcione

    esta muy chida

    gracias deverdad gracias

  16. Mauricio dice:

    Hola q tal, te cuento q estoy usando la plantilla Crystal-Blue y no he podido hacer ninguna de las dos formas…me podrias ayudar? por favor gracias

  17. Eli dice:

    ¡Muchas gracias! ¡¡Al fin!! No veas lo que me ha costad encontrar una manera de poner seguir leyendo que funcionase.

    Otra vez, ¡muchísimas gracias!

  18. Vanessa dice:

    Hola!
    He hecho todos los pasos que comentas pero no me oculta el texto.. me sale todo el texto y al final sale seguir leyendo… pero no lo esconde…
    Gracias y espero recomentaciones…
    Un saludo

  19. Virchoff89 dice:

    en la segunda parte…lo unico parecido q encuentro es:

    en vez de eso inserté lo q nos diste, pero no me funciono, solo aparece el seguir leyendo, y el texto sigue too completo sin reduccion.

    Sin embargo buscando mas encontre q tengo dos de esos codigos, tengo q reemplazar lo q nos diste en los dos?… por eso será q no me sale?

  20. Claudia dice:

    Virchoff: Prueba con este tutorial. Está más actualizado:

    Leer más en Blogger

  21. Venus dice:

    Mira, he implementado el truco y todo cerro bien.
    Pero cuando veo la entrada el seguir leyendo me aparece junto con el autor, comentarios, etc.
    Si cambio div por span no cierra la plantilla.
    La tuve que cambiar. pero la tengo, si no te es molestia te la envio.
    Muchas gracias

  22. Natanael dice:

    Ya le puse el “leer mas” con la primera opción, pero abajo del leer ams me sigue apareciendo “Más información»” ¿como lo quito? Gracias…

  23. Llano dice:

    Hola, he siguido la primera opción perfecta y creo que no he tenido problemas, pero el ultimo paso de postear una entrada, ya no se que hacer, si me tengo que ir a creación de entrada y poner un texto y hacerlo desde ahi, o desde otro lugar, y me imagino que tendre que añadir lo de mostrar texto y ocultar.
    Gracias

  24. felipe dice:

    no puedo hacer el paso e de la forma 1 le hago y siempre me sale un error de codigo html y ese paso se hace en donde dice entradas luego le doy editar entradas, y luego selecciono la que quiero pero no se si darle donde dice en la entrada un cuadro html le hago hay pero nada

    primero va el codigo y luego el texto o alreves

  25. A G U S ♥ dice:

    Ya le puse el “leer mas” con la primera opción, pero abajo del leer mas me sigue apareciendo “Más información»” ¿como lo quito? Gracias…

  26. Orlando dice:

    Muy buen tutorial, gracias

  27. Aneth dice:

    Claudia ayudame te puedo pasar por mail mi codigo completo y me lo cambias porfissss cuando no lo hago yo algo me falla!!!! ayudameeeeeeeee

Deja tu comentario
Tu Comentario