Pages

Subscribe Twitter

21 junio 2007

"Leer más" o "Seguir leyendo" en Blogger

Si tienes entradas muy extensas en tu blog y solo quieres mostar una parte de ellas en la página principal, Aqui tienes el truco perfecto. Asi tus lectores no tendrán que bajar mil metros para encontrar el articulo que deseen.

Lo primero que debemos hacer es modificar la plantilla, “Plantilla -> “Edición de HTML”, como siempre antes de realizar cualquier cambio realiza una copia de seguridad. Debes “Expandir plantillas de artilugios” y localizar el texto siguiente:

<div class='post-body'>

Una vez localizado incluye debajo el siguiente código:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

Una vez hecho sólo tienes que localizar el siguiente texto: <data:post.body> y añadir justo después:

<a expr:href='data:post.url'>Leer más...</a>
</b:if>


El resultado final debería ser el siguiente:

<div class='post-body'>


<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

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

<a expr:href='data:post.url'>Leer más…</a>
</b:if>

<div style=’clear: both;’/> <!– clear for photos floats –>
</div>


En rojo está lo que hemos añadido. Ahora sólo tienes que guardar la plantilla.

Para dividir los posts hay que añadir una etiqueta en las entradas que define cuál quieres que sea el extracto de la entrada que se muestre antes del “Leer más”.

Para ello sólo tienes que escribir el texto inicial y el resto encerrarlo dentro de:

<span class="fullpost"> <---Segunda parte del texto ---> </span>

De manera que, si en el área de creación de entradas de Blogger escribieras lo siguiente:

Texto inicial
<span class="fullpost">
Texto secundario
</span>

En tu blog aparecería lo siguiente:

Texto inicial

Leer más…

Y al pinchar aparecería, “Texto Inicial” seguido de “Texto secundario”.

Incluir la etiqueta automáticamente.

Existe también la posibilidad de, que por defecto y para no tener ni que acordarte ni que escribirlo una y otra vez, hacer que la etiqueta aparezca automáticamente cada vez que quieras crear una entrada.

Simplemente vas a “Opciones -> Formato” y en en el cuadro de texto de “Plantillas de entrada” añades: texto inicial <span class=”fullpost”> texto secundario </span> y guardas los cambios. Ahora cada vez que abras el editor aparecerá automáticamente la etiqueta.


by Hackosphere

Saludos!

81 comentarios:

guillermo dijo...

que blogmundi ni que nada, almenos pon creditos de donde te tumbaste el truco, ya que el actual partidario de este truco es http://hackosphere.blogspot.com/

para la proxima pon los creditos correctos, no te robes la informacion de los demas

Deathly dijo...

Gracias por correjirme

salu2!

Alberto A. dijo...

Si es de blogmundi que no te chorien

Deathly dijo...

No, el esta bien, es de Hackospere.
Blogmundi tambien les hace mension.

Luis dijo...

no me resulta, de hehco pegue el codigo y todo, pero no hay caso, sale todo el texto y despues sale Seguir Leyendo

Deathly dijo...

Luis, luego de que escribas toda la entrada vas a la pestaña "edicion de HTML" al lado de "redactar" y encierras el texto que no aparecerá entre estos tags:

[Primer texto]

<span class="fullpost">

[Segundo texto, el que no aparece]

</span>

Si no te resulta, pon en contacto y mandame un correo ^^

RC la Bujia dijo...

Muchisimas gracias he conseguido que mi blog tenga mejor aspecto. Un Saludo

http://rclabujia.blogspot.com

miguel dijo...

hola, hemos añadido lo que dices a nuestro blog pero tenemos un pequeño problema.

lo de leer más nos sale en cada post, incluso los antiguos que no tienen más que leer. no hemos hecho el último paso, el de modificar la plantilla de entradas así que por eso no puede ser.

alguna idea de cómo hacer para que sólo salga leer más cuando hay cosas que no salen en la página principal?

Amio Cajander dijo...

Gracias, muy útil.

Clau! dijo...

Muchas gracias!!!
Me sirvio un monton para mi blog, estuve tratando de otras formas y no me salia (o no entendia nada jeje)
Saludos!

M@yMoN dijo...

pues concuerdo con miguel. El seguir leyendo me sale en todos los post y no se como quitarlo..

Deathly dijo...

M@yMoN si, ese es el problema.
Este truco es ideal para alguien que utilizará siempre un texto escondido. Para resumir, o para generar mas impresiones de la publi ^^
Pero para alguien que solo quiere resumir en algunos post, puede utilizar este otro truco.
salu2

LuKi dijo...

Dios! muchisimas gracias! llevaba una semana probando de todo y éra tan sencillo como hacer esto! habia probado muchos metodos pero en todos me fallaba algo menos en este. Lo mínimo que puedo hacer es añadirte en mi poco concurrido blog.

Deathly dijo...

Luki gracias a ti por pasar por aqui ^^
Y que bueno que te sirvió, yo tambien te añadire a mis links :D

Max & Birrax dijo...

Estimado,

He seguido tu consejo y ahora en mi blog resulta mucho más cómoda la lectura.

Muchas gracias y un saludo,

Max.
http://maxbirrax.blogspot.com

Victor dijo...

Si bien estos pasos valen para las nuevas entradas que se publiquen, ¿cómo edito las entradas ya publicadas?

Deathly dijo...

Las entradas ya publicadas las editas en "entradas" desde el panel de control de blogger.

Rodrigo dijo...

ok ya tengo lo de "leer mas" pero cuando pongo los codigos mpara resumior la parte de la entrada se corta por ejemplo una parte del texto y de ahi sigue lo demas no se resume bien, a ver si entiendo bien span class="fullpost" lo pongo entre lo que quiero q aparesca y "/span" entre lo que quiero ocultar??

gracias x la ayuda

Deathly dijo...

Rodrigo mira, el texto oculto va encerrado por los codigos, por ejemplo esta es una entrada completa.

Lorem ipsum dolor sit amet, ultrices hymenaeos non porttitor illum vestibulum hac, ipsum at et urna sit non, sed orci ut lorem mi turpis sed, leo elit placerat consectetuer ligula.

Lo que ocultare esta en negrita y le pondre el primer codigo cuando comienza lo oculto, el /span, SIEMPRE va al final de todo el texto, en modo HTML.

Lorem ipsum dolor sit amet, ultrices hymenaeos non porttitor illum vestibulum hac, ipsum at et

<span class="fullpost">urna sit non, sed orci ut lorem mi turpis sed, leo elit placerat consectetuer ligula.</span>

Nelson dijo...

Hola. Primero que nada te felicito por el aporte que haces a personas que como yo no entendemos mucho el html.
Mi caso es que tengo problemas para guardar la plantilla, ya que me aparece un error de blogger que dice no poder hacerlo.
Si quieres ver el código fuente de mi pagina, es:http://cilicus.blogspot.com/
De antemano gracias.

Deathly dijo...

Hola nelson. viendo el codigo fuente no puedo hacer nada porque es distinto al que aparece en edicion html. Si quieres en contacto arriba me dejas tu msn y te ayudo, asi sale más fácil.
dw

Anónimo dijo...

hola muy bueno y util este tip, pero mira, tengo post ya publicados, como le hago para ponerlos en todos? tendria que hacerlo denuevo para esperar que me salga el nuevo codigo al inicio de la creacion de una entrada?

Deathly dijo...

Si... tendrías que editar los post ya publicados, agregandoles el codigo para que tubieran el leer mas.

Anónimo dijo...

hola amigo, antes que nada felicidades por tu blog esta muy bueno.
oye tengo un problema de esos que son como la piedra en el zapato, resulta que puse el codido para que se viera el lee mas (en blogger) la plantilla de mi blog es como la tuya, de 2 columnas pero ahora no puedo poner nada del lado derecho, lo que ponga ahi lo baja, pareciera que es de una sola columna como le hago? tambien quisiera saber
como le hago para que mis anuncios de google aparescan despues de haber dado click en lee mas? aparecen solos? o se puede modificar tambien eso? y ultima cosa, como le hago para poner un libro de visitas como el tuyo? que aparesca al final de cada post?
gracias ojala puedas ayudarme saludos !!

Anónimo dijo...

buen dia, quisiera saber como puedo poner debajo de todas las entradas de mi blog el texto de Siguiente pagina. o algunos numeros que indiquen que hay mas paginas.
Que esten bien

Deathly dijo...

Quieres cambiar los textos "Entradas antiguas" por Siguiente Pagina o algo similar...?
Si es así, aqui tienes 1 y 2 formas.

Jaime dijo...

Hola, tengo un problema y esque en mi plantilla no encuentro class=’post-body’ Por motivos desconocidos no existe..Alguien sabe decirme porqué?

Un saludo
variopoint.es

Deathly dijo...

En algunas plantillas tambien me pasa, y es que en vez de class='post-body' tienen 'xx-post-body', asi que busca solo por post-body, sin comillas hasta que encuentres alguno parecido =)

Deathly dijo...

Revise el codigo fuente de tu blog, y creo que el tuyo es class='postcontent'.
salu2

JESY2474 dijo...

Muchas gracias por el codigo, hacia tiempo lo andaba buscando, ahora si mi blog quedó como yo quería, muchas gracias de nuevo y que sigas asi ayuando a muchos

Jonasthra dijo...

Soy nuevo en esto y de verdad que me ha servido de ayuda
muchas gracias amigo

http://jonasthra.blogspot.com/

Sechat dijo...

He de felicitarte por tu blog, he aplicado algunos de los consejos o trucos que en él propones, pero aunque he consultado tu blog y otros semejantes me resulta imposible aplicar en mi plantillo lo de "leer más" o "seguir leyendo" porque la frase tras la que he de añadir el resto no figura por ningún sitio. Me refiero a la de div class=´post-body ¿Se puede introducir en la plantilla sin más? ¿dónde he de ponerlo? Gracias

Deathly dijo...

A veces pasa que no está exactamente como div class='post-body'
Asi que intenta buscando solo por post-body

J.A.F. dijo...

Yo lo tuve pero no me gusto, porque cuando publicas una entrada que no necesitas que aparezca el leer mas no podes eliminarlo siempre aprece!! y es molesto que diga leer mas cuando no hay nada mas que leer

Denshou dijo...

No encuetro el código div class=’post-body’ por ningun lado de mi EDICIÓN HTML. QUE HAGO?

Deathly dijo...

Intenta buscando solo por post-body o por class='post-body' con esas comillas

WOLFTATU dijo...

VIENTOS DEATHLY SIEMPRE ESTAS AL TIRO, LO VOY A LEER MUY BIEN PARA QUE ME SALGA A LA PRIMERA

WOLFTATU dijo...

AMIGO, LO UNICO QUE ENCUENTRO QUE TENGA "BODY" ES ESTO
.post h3 strong, .post h3 a:hover {
color:$textcolor;
}

.post-body {
margin:0 0 .75em;
line-height:1.6em;
}

.post-body blockquote {
line-height:1.3em;
}

.post-footer {
ALGUNA SUGERENCIA?

Deathly dijo...

Busca bien, hay otro body

Moderador dijo...

llevo una hora!
tratanodo de agregar

ayuda por favor

surcandoelhorizonte dijo...

hola saludos excelente sitio

gblas dijo...

Muchas gracias por el post, me sirvio de maravilla saludos!

Blog de Psicología dijo...

Hola, estoy intentando colocar la función "leer más" y está todo bien salvo por un cosa... que cuando se abre el archivo completo aparece doble, una copia se abre abajo del 1ero... no c qué es. inclusive al abrir el archivo directamente desde el link del título de la entrada me pasa lo mismo. Alguna idea?!. Saludos y gracias.

Mili dijo...

Gracias por el dato. Puse el seguir leyendo y me quedó bien. Pero necesito mandar las notas por mail y como el "seguir leyendo" está en java no permite que la gente acceda desde el mail que les mando. Hay alguna posibilidad de que el "seguir leyendo" linkeé a mi sitio? Gracias

Anónimo dijo...

olix !!!

iiop tengo una duda.........

kiiero poner un fondo fijo de ska



pero no se como hacerle


les agradeceria si me pudieran pasar unas kuantas paginas


grax

Anónimo dijo...

muchas gracias por todo! me sirvió de mucho... http://nanotecuentoalgo.blogspot.com

Erwin Salas dijo...

Buena a, simple y fácil de entender justo lo que necesitaba

Ayuda blogs dijo...

Muy bueno :)

José Manuel dijo...

Sí, sí y síiiiiii..por fin, y de una manera muy sencilla lo he logrado...y funcionaaaaaa..

Graciassssssssssssssssss, amigo

Diversidad y Democracia dijo...

hola! ante todo buenisimo el blog! necesito ayuda, porq si bien puedo colocar la función "leer más", no logro q el texto secundario lo haga ya que al clikear el Leer más...aparece el texto completo... mi blog es www.diversidadydemocracia.blogspot.com
mi mail: revolucionsiglo21@hotmail.com
si me dás una mano agradecidísimo. Nos vemos

djcustom dijo...

esta cool el tema si quieren entren a mi pagina www.lomejorquehay.tk hay juegos,peliculas 2009 anime online,hentai y programas a los que les guste entren www.lomejorquehay.tk

misapuntesdemoda dijo...

Nose por que no me funciona, lo he hecho tal cual, es más he intentado con otros códigos tamnien pero nada parece funcionar. O no me cambia nada o me sale el siguiente error: "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 "".

Te agradeceria muchisimo si me podes dar una mano, Graciasssssssss

David S. dijo...

A mí solo me agranda el texto sin ocultarlo. Ya me estoy desesperando, si no es una cosa es otra. Esto no pasa en Wordpress.

LO MAS BUSCADO dijo...

Saludos nose si puedan ayudarme, trate de hacer el efecto y cuando lo realizo nose porque me elimina todos los post y solo veo el blog sin ningun post. Alguien puede ayudarme.

Lady Sparrow dijo...

Hola por favor explicame como debo escribir si es entre los arentesis que debo sustituir el texto o qu eno entiendo no me sale no me funciona ya hice lo de leer masy si aparece en todas las entradas pero aca no entiendo como se hace si es despues, al medio o antes por favro ayudame. gracias
Te dejo mi mail: amadalibertad@live.com

Wesley Jackson dijo...

Perdona, pero no soy capaz de que me salga. Lo he hecho todo: expandir artilugios, añadir códigos (comprobando que no faltase un < o un >), todo todo. Y al final me da un error de XML diciendo que hay etiquetas que no están cerradas (que no tienen su "div" de cierre correspondiente).

Yo creo que debe ser porque estoy utilizando una plantilla "alternativa". Su nombre es Gramophonica. Te paso mi mail por si quisieras ver el HTML de la plantilla. Muchísimas gracias y a ver si por favor me pudieses ayudar:

wesleyjacksonblog@gmail.com

WapaClau dijo...

Hola! a mi me funcionó perfecto !! super fácil, a pesar de que mi plantilla es una adaptación de wordpress por lo que hay cosas que me resultan y otras no, ni idea porqué, aun estoy aprendiendo sobre los html, que era chino para mi. Tengo varias consultas, aprovechandome de tu buena voluntad :
- cómo edito las entradas ya publicadas ( antes de poner tu truco) con "seguir leyendo" ?
- cómo poner un widget en las entradas para votar por el post,tengo activadas las reacciones, redacción rápida y envío de entradas en "entradas" pero no aparecen.
- mi nube de tags aparece como una lista vertical, qué hago para que se vea como nube?
mi blog : http://kozip.blogspot.com/
mi plantilla : adstheme http://www.eblogtemplates.com/ads-theme-blogger/
eso por ahora, seguro mas adelante te voy a preguntar mas cosas...jeje...saludos y felicitaciones por tu blog, es tremendamente útil.

Anónimo dijo...

como saco las figuras en la barra de estado de hi5

Annie dijo...

hola. que tal? excelente truco! de verdad increible, pues hace tiempo estaba buscando como hacer esto,me funciono perfecto, aunque estaba viendo en algunas plantillas buscaba div class post-body
y no salia, pero bueno consegi una plantilla que si.
muchas gracias por tu aporte
soy nueva en esto de los blog, y cuando quieras puedes pasar y echar un vistazo a mi blog aqui mi direccion: http://newage77.blogspot.com/

cuidate!!!

Shandy dijo...

Hola....
=(
Pues es un excelente truco...
A mi no me funciono =(
Porqe soy muy menza y no entiendo la ultima parte de encerrar [] Y pues no entiendoo =(

Quizaz abria alguna manera de qe me puedas ayudar ... =(
Porfa!!

Quizaz pasandote en bloc de notas mi pantilla y la pegaria io...
=(
Please!!!

Comunicate conmigo:

shandy_14_17@hotmail.com

Si fueras tan amable...
Muchisimas gracias..
Tus aportes sonn de gran utilidad para todos ;)
Suerte.

janku dijo...

excelente no me habia salido con otros y con este si
muy bien explicado

hylosfynos dijo...

hola gracias por todo es muy sencillo pero aun así no me sale. sale lo de leer mas pero cuando entro ahí aparece la entrada sin la senda parte del texto por favor podrías decirme que puede o que hice mal desde ya muchas gracias o escribir a mi correo hylosfynos@gmail.com

Brenda dijo...

Gracias! he consultado como mil páginas y hasta aquí pude hacerlo.

Simple-MetaPumper dijo...

muchas grasias deberas como batalle pero al fina pude entender bien el tuto deberas

grasia

aora mi blogger esta un poco mas presentable jjejee
deberas
ok adios seguire checando tu blog

Luis Hevia dijo...

He seguido paso a paso tus indicaciones y me ha salido, pero el problema que tengo es que cuando le doy a "Seguir leyendo", se cierra la página y se abre con el artículo entero, de tal forma que hay que buscar donde estabas leyendo para. Lo que yo quiero conseguir es que el resto del artículo salga automáticamente debajo, sin cerrar la página, y al final que puedas contraer el texto. ¿Como podría conseguir esto? Gracias.

Deathly dijo...

Luis, para expandirlo, aqui hay un post donde esta explicado...
Sube el .js a algun servidor propio o gratuito porque por lo que sabia, Googlepages dejo de funcionar... pero mientras aun funcione mejor respaldarlo.. :P

INCIDE dijo...

Hermano no encuentro tu msn, por favor hice todo lo que me dijiste y me sale leer mas despues de todo la dirección de nuestro blog http://derechoshumanosincide.blogspot.com/
Por favor necesitamos esta ayuda para nuestros Post, de antemano gracias...

Luis Hevia dijo...

Deathly, muchísimas gracias, lo he hecho y va muy bien. Es un sistema mucho mejor que el otro, pienso que deberíais aconsejar siempre este. Por otro lado, para los nuevos, deciros que es muy sencillo de hacer, solamente teneis que hacer las cosas al pie de la letra, tal y como se os dice. Muchísimas gracias de nuevo Deathly.

Ivan's dijo...

no sirve creo que en pantillas modificadas no sirve lo e intentado de miles de formas y nada ayuda el primer codigo me dice que esta mal¡¡

Anónimo dijo...

como hago quiero cambiar plantilla de blogger, eso se como s ehace, pero en la plantilla vieja yo tengo la opcion leer mas, pero cuando pruebo la plantilla nueva no me sale esa opcion y todas las entradas me aparecen completas sin la opcion leer mas.

Vane (: dijo...

GENIAL , pero no me sale para seleccionar!!!!!! XD
Ayuda

RinoPC dijo...

En las plantillas modernas ya viene esa opcion, ya no es nesesario ingresar ningun codigo en nuestra plantilla ni en nuestro post, solo basta con un clic... si os quereis mas info escribeme: obed.sh@gmail.com

milanohiphop dijo...

gracias funciona perfecto
respetos desde venezuela

RinoPC dijo...

Vale vale, pero como ago si deseo oner una imagen en seguir leyendo.

J. C. Esguerra dijo...

Funciona super pero me toca hacer la redaccion desde la ventana de html y no usar la de redactar pues de lo contrario no funciona lo de texto 1 y texto 2.
Gracias

webespacio dijo...

esta muy buenaa tu inrformacion me encatana gracias eh

Derek Stevens dijo...

Hola! excelente información! hice todos los pasos sólo que lo de "leer más..." me aparece al final del post y sale la entrada completa. Estoy iniciando en esto del blog y tu información es de mucha ayuda para mí. Espero puedas responder lo mas breve posible, Muchas Gracias! sigue haciendo un excelente trabajo como siempre!

UEspanola.com dijo...

Hola, hago todo tal cual, la entrada la encierro como indicas, pero el texto me sale completo y al final me aparece leer mas, no me acorta la entrada.

Muchas Gracias espero tu respuesta

Anónimo dijo...

A mi no me aparece nada.. =( no funca...
Seguí todo al pie de la letra pero no hace nada.. ni si quiera aparene leer +....

tiempoglobal dijo...

Guao excelente Hackosphere, despues de meses buscando, y darnos de cabeza con tantos códigos expandiendo artilugio, y en pocas palabras dañando la plantilla, pues ni los saltos de línea ni ningún código que nos daban en diferentes blog surtia efecto, tan solo aplicamos el hecho de entrar a formato como bien lo indicaste, sin embargo solo hemos visto que funciono con el último post que colacamos con los anteriores no, de igual manera muchas gracias.

dPor MOLLENDO dijo...

Saludos como hago para que en el extracto de mis entradas, la imagen se muestre alineada a la izquierda y pequeña... y al dar clic en leer más la imagen sea grande y centrada, gracias por la ayuda....

Publicar un comentario en la entrada

Gracias por visitar Recursospaces, si tienes alguna duda, solo pregunta! ^^