Agregar “leer mas” o un “read more” al blog

Hoy por petición de Raquel, una de las persona que siguen este blog, les mostraré como podemos insertar el típico “leer más” en nuestro blog de blogger. Esta funcionalidad que resulta trivial en el caso de prácticamente cualquier otro servicio de blogs en blogger resulta bastante compleja.

Como en todas las modificaciones que requieren tocar la plantilla, es muy recomendable guardar nuestra plantilla actual antes de hacer un cambio, ya que existe el riesgo real de perder nuestra plantilla en este tipo de procesos en caso de no entender bien un paso o olvidárnoslo.

Sin duda este es el post que me ha resultado más complicado de escribir, debido a la gran cantidad de maneras que circulan por internet y lo antiguado que está todo respecto a blogger. Al final, por la opción de usar un script que ya existe ya que me parece la más segura.

El procedimiento será el siguiente:
1. Justo antes del fin de la etiqueta </head>, pegaremos el siguiente código:

1
<script src='http://www.oscargp.com/scripts/scriptleermas.js' type='text/javascript'/>

2. A continuación guardaremos la plantilla, y pulsaremos la casilla “expandir plantilla de artilugios”, y buscamos la siguiente sentencia en la plantilla:

1
<div class='post-header-line-1'/>

3. A continuación sustituimos la línea que hay justo después:

1
<div class='post-body entry-content'>

por el siguiente código:

1
2
<div class=' entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>

4. A continuación buscamos en la plantilla el siguiente código:

1
<p><data:post.body/></p>

5. Añadimos a continuación el siguiente código, después de lo que acabamos de buscar.

1
2
3
4
5
6
7
8
<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);'>Solo el resumen...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

6. Una vez hecho esto, guardamos la plantilla, y vamos a la pestaña configuración, y seleccionamos la opción formato. Dentro de la lista de parámetros que nos aparecerán buscamos “Plantilla de entrada”.

7. A continuación pegamos el siguiente código en la “Plantilla de entrada” (donde acabamos de ir) el siguiente código.

1
2
3
4
Aquí escribes el contenido.
<span id="fullpost">
Aquí escribes el resto del contenido que no se vera.
</span>

Con este último paso, hemos conseguido que en cada nuevo post, nos aparezca una plantilla inicia sobre que hemos de escribir en cada paso.

8. Finalmente, como demostración de que funciona, aquí el ejemplo en el blog de mi directorio web.

Por último comentar, que personalmente creo que es muy importante reservar el uso de esto únicamente a entradas muy largas.

81 pensamientos en “Agregar “leer mas” o un “read more” al blog

  1. Francisco Castillo

    Hola, muy buenos tus aportes pero tengo una consulta. A veces las entradas son demasiado largas y me gustaría poder hacer como e visto en otros blogs que le colocan un botón en el cuerpo de la entrada para que al presionarlo parte de la entrada se expanda. Es como esconder parte del texto de la entrada tras el boton. Mi interes en este botón es porque hay entradas muy pequeñas en las que no me interesan vistas parciales, y en cambió en otras entradas quizas a mis lectores no les interecen ciertos datos. bueno espero haberme explicado bien. Saludos y gracias

  2. Capi

    Hola Oscar, soy nuevo en esto, seguí tus pasos del post anterior y ahora no sé como arreglarlo. Podrías revisar mi blog y decirme que debo hacer, por favor? Te lo agradecería mucho. saludos

  3. YHONY

    Hola no encuentro lo que busco! si podes ayudarme estare muy agradecido fijate en mi bloger si podes y dame una respuesta ok Gracia sPerdoname por molestarte

  4. maria

    hola, leo con atencion tu post de como hacer eso de “leer mas”, y tengo un par de dudas antes de ponerme a hacerlo,1º ¿que significa “antes del fin de la etiqueta head? y 2º ésto: no está igual, en caso de hacer los cambios ¿funcionara? un saludo, espero respuesta, muchas gracias por tu pagina

  5. maria

    perdona, el 2º punto no se ha escrito porque pegué algo que tu tenias, me referia a <data:post.body//p>, que así justo no está, muchas gracias

  6. Oscar GP

    Hola María,

    Te cuento, la primera significa que en tu plantilla has de buscar la etiqueta head (tal y como está en el artículo, ya que hay varias), y la puedes poner en cualquier punto anterior, aunque mejor justamente antes para evitar problemas.

    Respecto a la segunda pregunta la respuesta es SÍ, funcionará sin ningún problema 🙂

  7. Melibea

    ¡Hola, Óscar! Verás, quiero comentarte una cosa. Resulta que he hecho tal y como explicas y me funciona; sin embargo, en ocasiones, cuando presiono sobre Leer más, no se abre la entrada y, a veces, aparece el Leer más en otras entradas en las que lo había eliminado. ¿Qué es lo que puede estar sucediendo?

    Gracias, Óscar. Un saludo

  8. juan

    Hola, he probado el truco . Muy bueno, pero algo he debido de hacer que no me acaba de funcionar.

    Todas las entradas me salen con el titulo, pero nada mas. si hago clic entonces me sale la primera parte y al hacer clic sobre leer mas me sale todo esta vez de forma correcta.
    Pero como digo solo me sale el titular en todas las entradas.
    un consejo.

  9. ZoT

    Buenas lo primero felicitarte por el blog esta bastante bien y después comentar un poco el inconveniente que se me presento y como lo solucione en mi caso particular, que quizás sea un caso general:

    1 .- en el paso 3 la linea es errónea, debería de ser ya que nos interesa que salgan las opciones de leer mas ó volver al resumen en la página principal de nuestro blog no dentro de la página del post en particular, queda bien explicado en la página de información Google sobre el servicio “ True if the current page is an item page (post page).” http://help.blogger.com/bin/answer.py?answer=46995

    2 .- no leí todos los comentarios porque son muchos pero alguno decía que le había funcionado y después no, evidentemente así es porque el .js que pones para usar en el paso 1 esta alojado en googlepages y tiene muy poco ancho de banda en cuanto se copa te deniega el acceso, así que aconsejo su descarga y que lo subáis a algún sitio vuestro.

    Espero no haberme equivocado al menos ha sido lo que yo cambie y observe mientras estuve probando todo este tema para que en mi blog funcionase: http://zot24.blogspot.com

  10. Adrian

    Saludos Oscar e tratado de realizar este ejercicio pero no me sale y es que no he podido encontrar por ningun lado el codigo que indicas en el punto 3. el resto de los codigos los e puesto donde indicas como puedo solucionar este problema me es indispensable esta herramienta.

  11. Oscar GP

    Hola a todos,

    Esta entrada no acaba de funciona bien, recomiendo que utilicen esta:
    http://www.oscargp.net/2008/07/agregar-leer-mas-o-read-more-a-blogger-blogspot-ii.html

    Respondiendo un poco a todos…

    Hola Melibea, es un problema que existe ya lo sé, pero que no es para nada solucionable, porque depende de los CSS de la plantilla, es un script y tiene sus problemas. Personalmente he dejado de dar soporte. Un saludo.

    Hola ZoT he realojado el script, porque tenía muchos problemas de espacio en google pages, realmente creo que he conseguido mitigar los problemas de espacio usando mi servidor :).

    hola Adrian, prueba a ver si encuentras solo esta linea div class=’post-body, con eso solo ya es una buena referencia. Un saludo 🙂

  12. Pablo

    Hola Oscar

    Tengo una pregunta para ti, y la misma me da mucho inconveniente cuando busco la siguiente linea, la cual tu describe en agregar leer mas..

    Quiero que me digas donde se encuentra la linea , por que me da mucho inconveniete encotrarla, espero que e ayudes para poder colocar los codigos que tu describes para que aparesca leer más.

    Tambien quiero saber cual de la las lineas debo sitituir despues de: , por que hay dos, cual de ella es

    1-
    2-

    cual es de las dos.

    Pablo

    Enviame la Respuesta a:topmef@hotmail.com

  13. Pablo

    Hola Oscar

    Tu post esta excelente, muy bueno.

    Tengo una pregunta para ti, y la misma me da mucho inconveniente cuando busco la siguiente linea: , la cual tu describe en el post.

    Quiero que me digas donde se encuentra la linea , por que me da mucho inconveniete encotrarla, espero que e ayudes para poder colocar los codigos de la linea:
    Leer más…

    Solo el resumen…

    checkFull(“post-” + “”)
    que tu describes para que aparesca leer más.

    Tambien quiero saber cual de la las lineas debo sitituir despues de: , por que hay dos, cual de ella es:

    1-
    2-

    Pablo

    Enviame la Respuesta a:topmef@hotmail.com

  14. Cecilia

    Hola Oscar, necesito tu ayuda, realice todos los pasos que indicaste pero me quedó sólo el título en la portada (luego se despliega la info), y como es un blog de noticias y artículos necesito que se vea un primer párrafo, podrías ayudarme por favor
    Solo con los pasos que indicaste pude lograrlo, porque no tengo idea de programacion
    graciasss

  15. Cristian

    Hola oscar estaba buscando pero en ninguna pagina me funcionaba este truco y tu lo hiciste funcionar pero quisiera saber como haces el script que subistes en tu página o sea este por fa dime como lo haces porque supongo que muchos lo utilizan y la pagina puede hacerse lenta, por fa quiero mi propio script gracias adelantado

  16. Yoni

    hola..puse en practica este truco.sin obtener el resultado que decis.

    ahora creo una entrada.y no me sale el contenido.solo el titulo.que paso………………………………………….

  17. Cecilia

    Hola quería saber si tuvieron respuestas de Oscar, porque la verdad necesito mucho realizar este truco en el blog que tengo si alguien puede ayudarme por favor se los agradecería!! saludoss

  18. Ariel

    Hola querido amigo.. soy un lector que frecuenta mucho tu Web me ha servido para contruir mi blog por completo y tu web me ha parecido la mejor herramienta para hacerlo. En fin despues de haber hecho muchos tutoriales ya ni guardaba mi plantilla. y es por eso porque te escribo. Hice el tutorial de “read more” para las entradas. y me quedo asi la web http://odontologiaucalp.blogspot.com/. creo que asi no era por eso te pido una mano para solucionar mi problema ya que no he guardado la plantilla y me confie ciegamente que no me podria equivocar en los pasos. Bueno espero tu solucion con ansias. Y desde ya te envio un aplauso por todos tus tutoriales.

  19. bETINA

    Hola. Gracias por tu gran ayuda.
    Me gustaria que me ayudarás en mi blog…
    He hecho todo paso a paso pero no sale perfecto..
    Ingreso el título y un párrafo para que se muestre en la primera página y luego al dar leer más se muestre todo. Pero solo me salen titulos y luego al dar clic en el titulo me sale el titulo, el párrafo y recien leer mas.
    Puedes ver en http://betinapurisaca.blogspot.com
    gracias anticipadas

  20. BETINA

    Bueno gracias ya solucione el impase.
    Gracias ZoT
    En realidad es solo cambiar en el paso 3: la linea 2
    por lo siguiente

    No es igual sino diferente para que muestre en la página principal
    Gracias de todos modos.

  21. Guerra

    Buenas, amigo sigo todos tus pasos y no sale como dices, la palabra leer mas sale, mas todo el texto sigue igual, si me puedes ayudar estare agradecido, aqui te copio el formato para que me ayudes, gracias..


    .fullpost{display:none;}

    Leer más…

    Solo el resumen…

    checkFull("post-" + "")



  22. Day

    Gracias brother… de verdada ke me ayudaste demasiado… te felicito por esa página tan buena. Bye y cuidate muxo, sigue así 🙂

Los comentarios están cerrados.