Mostrar resumen entradas y leer mas en blogger






Muchos son los editores de blogger que tienen dudas a la hora de mostrar las entradas de sus con un breve resumen en la pagina principal.

Con esta pequeña guía explicaremos como mostrar ese resumen con un enlace para ampliar el texto en la misma para que el usuario interesado en ese articulo pueda leerlo sin problemas. Se recomienda guardar la plantilla antes de modificarla por si acaso hacéis algún paso mal.



Lo primero que debemos hacer es en configuración, en la pestaña plantilla pulsamos sobre la opción de Editar HTML y seleccionamos Expandir plantillas de artilugios.

Lo siguiente que debemos hacer es insertar justo antes de la etiqueta
</head>
el siguiente código:


<script src='http://rarunach.googlepages.com/hackosphere.js' type='text/javascript'/>


El tercer paso que debemos realizar para continuar será buscar la etiqueta
<div class='post-body'>
y sustituirla por:


<div class='post-body' expr:id='"post-" + data:post.id'>

<b:if cond='data:blog.pageType == "item"'>


Por ultimo buscaremos la etiqueta <data:post.body/> y justo después de esta, insertaremos el siguiente código:


<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);'>Read More...</a></p>

</span>

<span id='hidelink' style='display:none'>

<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Summary only...</a></p>

</span>

<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>

</b:if>


Se puede modificar el texto Read y Summary... por el que deseéis. Guardamos la plantilla y por ultimo nos vamos a la pestaña configuración, formato y en plantilla de entrada añadimos lo siguiente:



Resumen a mostrar

<span id="fullpost">

Contenido completo

</span>


Con esto conseguiremos abreviar algunos post demasiado largos para la pagina principal ya que puede que a algunos usuarios ese en concreto no les interese y pueda llegar a cansarles.

¿No te funcionan los cambios?
¿Deseas añadir algo nuevo y no sabes como?
Nosotros lo hacemos por ti

67 comentarios:

Guty dijo...
2 de julio de 2008, 14:21  

Gracias por el tutorial, hay mucha gente que usa blogger que anda buscando este tipo de recursos.
Saludos.

Guty

Javi dijo...

Hola muchas gracias por el comentario, eres el primero que tengo ya que el blog tiene apenas un par de semanas. Un saludo

sanador tekura dijo...
4 de julio de 2008, 3:43  

No logro que me acepte los cambios en la plantilla.Será porque es una preformada?

Javi dijo...

hola sanador, he repasado el post y hay un error, el primer paso es añadir el codigo justo antes de la etiqueta /head y no head como pone, prueba haber si ha sido eso y buscamos cual puede ser el problema. Modifico el post para que no haya confusiones. Un saludo

Angela Arias Molina dijo...
11 de agosto de 2008, 2:47  

¡MUCHAS GRACIAS! Estuve buscando este preciso código por todas partes, pero ya sabes: la millonésima es la vencida. Me sirvió muy bien. Te lo agradezco profundamente :D

Javi dijo...

Muchas gracias Angela, eso es lo que trato que os sirva mucho de ayuda cada uno de los post que escribo. Un saludo

Edison Monsalve dijo...
14 de agosto de 2008, 7:08  

Hola

Este es uno de los hacks que quisiera tener en un blogger que vamos a crear para un evento que generará muchas entradas diarias, pero solo durante 5 días. Como verás es muy molesto que muestre toooda la entrada y tampoco sé como cambiarla para algo mejor.

Aunque hice los cambios no me funcionó, utilizo la plantilla Blogy-illacrimo de http://designdisease.com/ modificado por http://blogandweb.com.

Lamentáblemente no me funcionó, supongo que en parte es porque la entrada: div class='post-body' aparece como div class='post-body entry-content'.

No sé que estoy haciendo mal, pero me salvarías muchas horas de trabajo y mal café si me ayudas a implementar esta opción en el blog.

Saludotes.

Javi dijo...

Hola morpheus, antes de poder ayudarte necesitaría saber si estás seguro de haber realizado todos los pasos correctamente, porque no debería darte problema. En el caso que sea así, cuentame que te aparece, ¿te da algún error? o simplemente no te hace nada. Espero poder ayudarte pero dame más info please. Un saludo

Edison Monsalve dijo...
15 de agosto de 2008, 5:19  

Hola Javi.

Estuve revisando todo el procedimiento, ya me funcionó, era que no pasaba nada con mis entradas y entendí que no se trata de acortarlas sino de previamente aplicar las etiquetas span.

Mil gracias por la ayuda..

Saludotes desde Colombia.

Javi dijo...

Me alegro de que por fin te haya salido, un saludo y encantado de que te haya servido de ayuda

Milton Copparoni dijo...
22 de agosto de 2008, 3:57  

no se que pasa, pero hago exactamente todo y en el post me salen directamente los dos textos, el resumido y el otro :(
que puede estar fallando? tendrá que ver con la plantilla del blog o con la plantilla de entrada?
Milton

Javi dijo...

A mi tambien me pasaba al principio, yo repasaría bien todo el código. Fijate muy bien el la última parte. Cada vez que crees una entrada debería salirte el código que índico. Si sigues sin conseguirlo dame algun dato más haber si puedo ayudarte

Luiky dijo...
4 de septiembre de 2008, 20:40  

Hola Javi,
Tengo una duda, haber que puedes hacer, en mi blog he metido el codigo que has puesto, y me pone la el read more correctamente, hasta ahi todo normal, pero cuando pincho encima de read more, me abre el resto del texto en la misma portada del blog, y a mi me gustaria q me llevara a lo que es la pagina del post.

Nose si me he explicado bien, un saludo y felicidades por el blog ^^

Chapu Valdegrama dijo...
6 de octubre de 2008, 2:20  

No sé que pasa, pero no encuentro el dichoso div class='post-body' por más que busco y rebusco en el código. ¿Por qué parte anda? ¿Principio, mitad, medio? Gracias por anticipado.

Heru! dijo...
19 de octubre de 2008, 9:05  

me ha salid lo siguiente:

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 "p" must be terminated by the matching end-tag "".

y lo e revisado varias veces noc q es¿?

ayuda plis grax!

Javi dijo...

Hola heru,

Fijate bien porque lo que te está indicando blogger es que dejas una etiqueta p sin cerrar. Puede que tu plantilla este ya modificada por lo que debes fijarte muy bien.

Mikhail dijo...
23 de octubre de 2008, 4:41  

me he subido una plantilla que encontre en la web y trate de modificarla para crear las entradas resumen... pero no me funciona... será la plantilla?

Javi dijo...

Hola Mikhail, puede que al ser una plantilla descargada, el codigo que hay que modificar este cambiado pero debe funcionar. Asegurate de que encuentras el codigo exacto que debes modificar y no dejas ninguna etiqueta sin cerrar. No deberias tener problemas para poder hacerlo.

SINTIES dijo...
26 de octubre de 2008, 7:11  

javi:

he seguido todas las instrucciónes al pie de la letra y las entradas no cambian.

quiero resumir mis entradas porque son demasiado extensas.
el codigo div class='post-body' me sale como
div class='post-body entry-content'
no se si eso es lo que esta mal.

además en el último paso no se como insertar

Resumen a mostrar

span id="fullpost"

Contenido completo

/span

¿en resumen a mostrar copio el resumen que quiero se muestre en la entrada?, dejo la parte de
Contenido completo

/span
o simplemente no la pongo

gracias, espero me ayudes.

Javi dijo...

Hola Sinties, siento tardar en contestar. No creo que haya problema con la etiqueta donde aparece post-body. Por lo que me cuentas el problema viene en lo de resumen a mostrar y todo el contenido. Te explico como funciona, este truco lo que hace es recortar el post hasta donde tu le indiques y si el visitante quiere seguir leyendo tendra que pulsar en leer mas.En la parte donde pone resumen tendras que escribir hasta donde quieres que se muestre el post recortado. Donde pone contenido completo, tendras que escribir el resto del post, sin añadir lo anterior que siempre se mostraría. Espero que te funcione, un saludo

Anónimo dijo...
29 de octubre de 2008, 4:01  

Hola Javi, te agradezco un montón por la ayuda que les das a los otros. Una consulta, cómo puedo hacer para que en google aparezcan las entradas de mi blog, con un pequeño resumen del texto. Mi blog está, pero para encontrar las entradas tengo que poner el nombre del blog y el titulo de la entrada completo, y así, no me va a encontrar nadie.

Javi dijo...

Hola Ana, no te preocupes tanto por un resumen para google y si mas por los titulos. El 95% de mis visitas me encuentra por los titulos de mis post. Escribe articulos originales con buenos titulos y la gente te encontrara, pero debes tener paciencia.

Tambien es bueno realizar un trabajo SEO o de posicionamiento para que tus paginas esten mejor colocadas en google, eso es imprescindible. Puedes encontrar mas info en multitud de foros y blogs sobre el tema

Anónimo dijo...
15 de diciembre de 2008, 9:09  

Qué tal javi,

Pues me encuentro en la misma situación que Chapu, el div class='post-body' no se encuentra en la plantilla que tengo. El problema es que la plantilla no la puse yo, sino un amigo, así que no sé cómo fue armada o por qué le falta esa parte. Me gustaría saber si se puede agregar en alguna parte de la plantilla todo ese código o es necesario buscar una plantilla que la contenga.

Maiz dijo...
28 de diciembre de 2008, 17:26  

hola a mi me pasa lo siguiente en la parte de los codigos no encuentro el div class='post-body' sino el div class='post-body entry-content' y yo si logre hace los pasos correctos pero no se q pasa.nesecito ayuda porfavor. mi msn es HASTA.LAS.HUEVAS@HOTMAIL.COM

jair jaramillo dijo...
2 de enero de 2009, 22:18  

GRACIAS EL ARTICULO ESTA MUY BUENO PERO NO ME FUNCIONO, CUANDO VOY A CREAR UNA NUEVA ENTRADA ME APARECE, "RESUMEN" Y ALGUNOS ESPACIOS MAS ABAJO ME APARECE "TEXTO COMPLETO". YO LE ESCRIBO ASI COMO EL DICE EL RESUMEN ARRIBA Y LO ATRO ABAJO, Y LE DOY EN PUBLICAR Y YA PUBLICADO ME APARECE TODO JUNTO E INCLUSO SALE EL TEXTO QUE DICE RESUMEN Y read more.COMO LO CORRIJO

Anónimo dijo...
8 de enero de 2009, 21:53  

Hola, Javi. Ante todo, gracias por tu artículo, por compartirlo con todos y además tener la paciencia de ayudarnos cuando no nos funciona. A mí lo que me ocurre es que, cuando pincho en el enlace "Read more..." la página no hace nada y el enlace de abajo dice: javascript:void(0);

¿Dónde estoy metiendo el remo? Gracias por tu ayuda.

Anónimo dijo...
24 de enero de 2009, 0:28  

Muy bueno excelente:)

davapa dijo...
15 de febrero de 2009, 20:07  

gracias!!!!
he estado 45min buscando esto y todos los codigos que habia por ahí no me funcionaban.

Crisanto Giron dijo...
22 de febrero de 2009, 23:53  

alguien me ayuda, no encuentro data:post.body/ por ninguna parte. les aseguro que no esta, sera que lleva otro codigo? gracias

Anónimo dijo...
5 de marzo de 2009, 4:48  

Excelente, muchas gracias!
Saludos desde México

l3utterfish dijo...
11 de marzo de 2009, 18:27  

alguien sabe como hacer que funcione en old BLogger este truco?

Anónimo dijo...
15 de marzo de 2009, 17:38  

creo que este truco funciona por igual en el old y el nuevo blogger. Un saludo.

Mi mundo VipZE dijo...
1 de abril de 2009, 4:43  

javier es mi segundo dia en la blogsfera y
realmente es lo que bscaba me parecia imposible editar el dichoso codigo y ala primera me funciono al 100% gracias.

nota (tengo 0 conocimiento en esto)

Jose Luis Alvarez dijo...
2 de mayo de 2009, 5:04  

Javi, buenas noches

Esta buenisimo este algoritmo, pero no funciona correctamente

La primera parte no apere, pero si aparece el texto completo de la segunda linea y cuando pongpo leer mas aparece tod completo,

Esta raro, a ver si me puede orientar

Gracias

josé Luis alvarez

Javi dijo...

Hola Jose Luis, el funcionamiento de este truco es el siguiente:

Al crear un nuevo post te aparece siempre el codigo que añadimos(span id="fullpost"). Para que funcione correctamente deberás hacer lo siguiente. Escribe encima de ese código lo que quieras que se muestre del post en la página principal de tu blog y entre el código predefinido que hemos puesto, escribe el resto del post.

De esta manera es como si ocultaras una parte del post y al darle a leer mas lo unico que haces es indicarle que tambien se muestre. Quizas la explicacion no esta muy alla, a ver si la cambio. Espero que no tengas problemas. Un saludo

ximo dijo...
10 de mayo de 2009, 22:39  

Tengo un problema, he conseguido hacerlo todo correctamente y puedo poner leer mas donde quiero, pero es que tambien me aparece en los posts que son cortos y no es necesario al final del todo. ¿que es lo que puedo hacer? ¿como puedo hacer para que solo aparezca en los post que yo quiero?

Javi dijo...

El funcionamiento del truco es el siguiente, Escribimos lo que queremos que se muestre en nuestro post en la página principal. Despues lo que queremos que se oculte irá entre el código span id="fullpost", de modo que si no pones este código tu post se mostrará completa en la página inicial.

Christians Reflections dijo...
26 de mayo de 2009, 2:44  

q tal.. exelente este codigo.. lo aplique y casi todo bien, solo tengo una duda, cuando le doy a continuar leyendo no me lleva a la pagina del post sino que lo abre alli mismo :S que puede estar pasando?? espero tu respuesta, gracias

Javi dijo...

Hola christians, el funcionamiento del script es el que indicas, al hacer el resumen solo te lo oculta y al darle a leer mas, muestra el resto del contenido, ten en cuenta que tus visitas realmente lo van a usar bien poco ya que se supone k el 90% de las visitas de una web debe provenir desde el buscador, por lo que tus visitas entrarán siempre en la pagina de un post. Lo util de este script es no saturar la página principal con post demasiados largos que puedan aburrir a personas que lo vean, si a alguien le interesa o entrara en la pagina del post o lo leerá entero pero no obligas al resto a verlo. Un saludo

ReiixD dijo...
27 de mayo de 2009, 19:49  

Tengo un problema con tu tuto...:'(


3 paso -div class='post-body'-

4 paso -data:post.body/-


esas partes no las encuentro..:'(

ReiixD dijo...
27 de mayo de 2009, 23:09  

ia los encontre!:D
pero nada se abrevio..:S
como le hago?..T_T

Javi dijo...

Hola Reii, tienes que hacer la ultima parte del post, una vez que hayas añadido la ultima parte del post, lo de (span id="fullpost), el funcionamiento es el siguiente, antes de esa etiqueta tienes que escribir el texto del post que quieres que se muestre, y entre esa etiqueta el texto que va a ir oculto. De esta manera al pulsar sobre leer mas, se mostrará el texto que va entre las etiquetas span id="fullpost"

John Paul Da Bosco dijo...
20 de junio de 2009, 21:38  

Saludos Javi... mira, seguramente ya estas hasta la coronilla de que te pregunten lo mismo jaja! Pero el asunto es q segui todos tus pasos, no me dio error en ningun momento, e incluso, me mostro el "Read more" al final de cada post, el q cambie por "Lee mas". El problema es que no entiendo lo del (span id="fullpost),porque, cuando le doy en Editar entradas, en ningun momento, me muestra el código (span id="fullpost) y no tengo referencia de donde poner la primera seccion y la segunda (para completar el post). Así tambien, el link de "Read More" sale como "Void" y no te lleva al URL de el post especifico.

Donde encuentro el (span id="fullpost)? Lo tengo que insertar en cada entrada? A ver si me puedes dar un poco de luz en el asunto.. jaja! Un fuerte abrazo!

Javi dijo...

Hola John, si has seguido todos los pasos correctamente, el codigo span id="fullpost" te tiene que aparecer directamente cuando vas a crear una nueva entrada, en las entradas antiguas no aparecera por lo que si quieres que aparezca la funcionalidad deberás añadirla tu manualmente

John Paul Da Bosco dijo...
23 de junio de 2009, 3:50  

Gracias Javi, claro! Ahora insertando el codigo manualmente en entradas antiguas, me resume el post. Nada mas que todavia, el enlace de "Lee mas..." me aparece como javascript:void(0); de forma que yo cumple con la funcion de mostrar el post completo, ni de llevarte al enlace del post, simplemente te regresa resetea la pag principal... Que puede estar mal? Un abrazo bro! Mil gracias por tu ayuda!

Prod. Soga Y Tranquero dijo...
27 de junio de 2009, 17:11  

como hago para q mi blogger aparezca en google

AJ-Taker dijo...
9 de julio de 2009, 20:53  

hola, quisiera saber como hacerle para que solo aparezca en las entradas que quiero, porque me aparece automáticamente en todas las entradas.
además cuando le pongo eso de span id="fullpost" y luego /span no sale el resto de la entrada. Ya revise todos los pasos y no sé que está mal, tal vez porque en mi plantilla no está el div class='post-body' sino el div class='post-body entry-content'
¿Qué puedo hacer? necesito ayuda porfavor

Anónimo dijo...
1 de septiembre de 2009, 13:12  

Hola... nos e como hacerlo:(...
Tengo un blogger y no encuentro ninguna etiqueta..
La busco (con el buscador de texto y no encuentra)
Supongo que lo tengo que buscar en "Edicion en HTML de template" ?... Porfavor.. ayudarme..:S

Unknown dijo...
6 de septiembre de 2009, 11:13  

no se puede poner que cuando le des a leer mas , tambien salga el cuadro de poner comentarios , es que es lo que mas me interesa :$

Radio Sin Fronteras dijo...
9 de septiembre de 2009, 8:39  

compdre esta bueno busque por varios lados esta opcion pero esta fue launica que funciono 100%

gracias

saludos desde chile

Anónimo dijo...
11 de septiembre de 2009, 21:01  

al hacer esa payasada se van a apoderar de tu blog
googlepages.com es parte de google al poner lo que se dice aqui hacen una contrapuerta para ingresar a tu blog y sacarte la informacionte hackean el blog. ya denuncie esta pagina.

Javi dijo...

k dices tio? es solo un script, cuaquiera que entienda un poco sabe que solo se oculta el texto... que tienes 12 años?

Maar dijo...
17 de septiembre de 2009, 6:14  

Javi, mil gracias pero tengo una pregunta.
La mayoría del tiempo me va bien, pero a veces simplemente no funciona, no despliega el resto de la entrada.

Otra pregunta, hay alguna manera de customizar ese read more para que no aparezca a la izquierda, ponerlo en negrita, etc?

Guillermo Lamphar dijo...
4 de noviembre de 2009, 1:11  

Ya tengo implementado este script pero alguna veces (no se a que se deba) aparece la misma etiqueta de leer mas en post en donde no esta el código de div id="fullpost" etc.
:S
Sabes a que se pueda deber o como solucionarlo?

Anónimo dijo...
14 de noviembre de 2009, 6:00  

no sirve tu basura no puedo con mi visionary

Tu post es una porqueria vete a la mierda

jimtsu dijo...
18 de mayo de 2010, 4:17  

a mi, si me sirvió, gracias

神 Yuu~sama 神 dijo...
14 de junio de 2010, 17:23  

Me gusto mucho javi, pero mira desde el principio no me sale <div class='post-body> la busco con ctrl + f y nada, sera que esta escrita de otra manera? con el ultimo paso si lo encontre, pero obvio si no le doy forma al cuerpo por mdeio del html no me va a hacer las entradas resumidas, mira mi blog http://japanlovemagazine.blogspot.com/ me encantaria poder modificarle eso, si pudieras mandarme al mail la respuesta no se, gracias de verdad. ^^ yuuki_0830@hotmail.com

Bull Spread dijo...
28 de julio de 2010, 17:57  

Gracias, me sirvio perfecto.

Sora/Artemis dijo...
3 de agosto de 2010, 21:59  

no logro agregarlo... T_T :'(

Luis Alberto dijo...
15 de agosto de 2010, 0:20  

No encuentro el famoso: div class='post-body .. de ninguna manera .. uso el thema RedBel ... donde esta ese pedazo de codigo !!!!!!!

Lucía dijo...
3 de septiembre de 2010, 12:46  

como CiberUtiidades yo tampoco encuentro: div class='post-body. Por favor ayudadme! :( :( :(

Sandra Bonilla dijo...
24 de octubre de 2010, 8:21  

:( bueno la verdad es ke muy buena ayuda, pero cuando todo iba bien y veia todos mis enlaces y otras cosas preciosas con el truco, pero al cabo de 2 meses todo se desconfiguro, lo quize volver a poner, pero ya no se puede, auxilio mis entradas son largusimas

Sandra Bonilla dijo...
24 de octubre de 2010, 8:30  

:) a si y primero aye facilmente <div class='post-body>, ahora ya no aparece mira mi blog se a desconfigurado http://crepusculosagamexicoamantedetaylor.blogspot.com/, no se porque espero las respuesta y me ayudes.

Sandra Bonilla dijo...
24 de octubre de 2010, 8:34  

Te daras cuenta de la separación del fondo lo primero es lo que publico como resumen, pero lo demas tambien aparece, y aparece el leer mas, que pasa?

Katz Dixon dijo...
4 de noviembre de 2010, 3:26  

se puede hacer lo mismo, pero para una busqueda? es decir, que aparezca un resumen de igual manera que en la página principal, pero al momento de realizar una búsqueda?

Raul Papp dijo...
4 de marzo de 2012, 11:30  

al hacer la entrada, hay un boton parecido a una hoja partida en dos. escribes lo que quieras que aparezca en la pagina principal, le das a ese boton, que se llama "salto de pagina" y luego sigues escribiendo lo demas. creo que es una manera mucho mas facil de hacerlo que modificando el html..

Pedrito dijo...
20 de junio de 2012, 16:00  

Hola amigos,

Yo tengo un código personalizado de "leer más" con el que estoy muy contento... El problema viene porque...desearía emplearlo también las páginas pero la opción de salto de página no parece funcionar... ¿Alguna idea? Les dejo el link a mi site para que vean a qué me refiero...

Abrazos!

Pedrito Rico

Cuéntanos que te ha parecido este artículo

Emoticonos en blogger
:) :'( :( :P :D :$ ;) :-I :-X :o :O |O :\

Traductor

Suscríbete vía email

Introduce tu dirección de correo:

Suscríbete

Seguidores