.jpg)
El truco de "Leer más" en Blogger (y un extra)
Hace algunos días publiqué un post para cumplir con la promesa de explicar un procedimiento que permitiera emplear el truco de "leer más" en Blogger. Sin embargo, el método presentaba un desperfecto mayor. A continuación explicaré un procedimiento cuya efectividad he verificado personalmente (puedes ver la prueba en este mismo post). Es un poco más complejo que el método original, pero permite una funcionalidad aparte que puede parecerte más interesante.
El truco de leer más consiste en mostrar en la página principal del blog sólo una parte de los post, y dejar un vínculo que conduzca al resto del texto, ya sea desplegandolo en la misma página principal del blog o conduciendo a la página individual del post. Esto permite al usuario ver más información y acceder sólo a aquella que es de su interés, en vez de pasearse por posts kilométricos para encontrar lo que desea.
Para utlizar esta función, debes hacer lo siguiente:
1. Selecciona la opción "Plantilla" en el panel de tu blog, y luego selecciona la pestaña "Edición de HTML". Lo primero que tienes que hacer siempre que modifiques tu plantilla HTML es guardar una copia de seguridad de ella, para que si la estropeas puedas recuperarla. Para descargar tu plantilla selecciona la opción "Descargar plantilla completa" en la pantalla de edición HTML. Guarda el archivo .xml (tu plantilla) y mantenlo en tu computadora.
2. Activa la casilla "Expandir plantilla de artilugios" del editor HTML. Ahora ubica el código: <head> e incluye debajo del mismo el código que se encuentra en este link o en este otro link (el código no se encuentra en esta página por ser muy extenso).
3. Ahora tienes que decidir cómo quieres mostrar el texto oculto (la segunda parte del post). Si quieres:
a. Mostrar el texto oculto en la misma página principal del blog, por medio de un enlace que "expande" o "contrae" la segunda parte del post, haz lo siguiente:
Ubica el código <div class=’post-body’> e introduce el código en rojo como se muestra más abajo:
El truco de leer más consiste en mostrar en la página principal del blog sólo una parte de los post, y dejar un vínculo que conduzca al resto del texto, ya sea desplegandolo en la misma página principal del blog o conduciendo a la página individual del post. Esto permite al usuario ver más información y acceder sólo a aquella que es de su interés, en vez de pasearse por posts kilométricos para encontrar lo que desea.
Para utlizar esta función, debes hacer lo siguiente:
1. Selecciona la opción "Plantilla" en el panel de tu blog, y luego selecciona la pestaña "Edición de HTML". Lo primero que tienes que hacer siempre que modifiques tu plantilla HTML es guardar una copia de seguridad de ella, para que si la estropeas puedas recuperarla. Para descargar tu plantilla selecciona la opción "Descargar plantilla completa" en la pantalla de edición HTML. Guarda el archivo .xml (tu plantilla) y mantenlo en tu computadora.
2. Activa la casilla "Expandir plantilla de artilugios" del editor HTML. Ahora ubica el código: <head> e incluye debajo del mismo el código que se encuentra en este link o en este otro link (el código no se encuentra en esta página por ser muy extenso).
3. Ahora tienes que decidir cómo quieres mostrar el texto oculto (la segunda parte del post). Si quieres:
a. Mostrar el texto oculto en la misma página principal del blog, por medio de un enlace que "expande" o "contrae" la segunda parte del post, haz lo siguiente:
Ubica el código <div class=’post-body’> e introduce el código en rojo como se muestra más abajo:
<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 href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Leer más</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Contraer</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
b. Si quieres en cambio que al hacer clic en "Leer más" el usuario sea dirigido a la página individual del post, donde podrá encontrar el resto del texto, haz lo siguiente:
Ubica el código <div class=’post-body’> e introduce el código en rojo como se muestra más abajo;
<div class='post-body' expr:id='"post-" + data:post.id'>
<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>
<span id='showlink'>
<a expr:href='data:post.url'>Leer más</a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
4. Listo, esas son todas las modificaciones que le tienes que hacer a tu plantilla. En los códigos, puedes cambiar el "Leer más" (y el "Contraer" en el caso del método "a") por el texto que tú quieras para personalizarlo. Ahora lo que tienes que hacer cuando desees emplear el código es escribir la primera parte del post que deseas dividir, y luego la segunda parte del post (la que estará oculta) encerrada entre las etiquetas <span id="fullpost"> y </span>
Es decir, en la vista HTML tu post se vería así:
Primera parte del texto
<span id="fullpost">
Segunda parte del texto
</span>
Y eso es todo. Si vas a utilizar la división de post frecuentemente, puede incluir las etiquetas HTML necesarias automáticamente para cada vez que crees un nuevo post. Entérate cómo en este post.
Los códigos son cortesia de Ramani.
Hasta el próximo post...
Entradas
86 comentarios):
Ya empezaré a escribir posts del tamaño de testamentos ahora que me sé el truco de "Leer más". I've got the power!!!!!!!!!!! xD
Te agradecería si pudieras ayudarme a agregarselo a este blog
ya que como tiene plantila xml se me ha comp`licado: http://crearempleo.blogspot.com/
Hola, amigo el código que esta (en este link) no abre, te agradezco lo que puedas hacer.
Genial post!!, justo lo que estaba buscando y por mucho tiempo, esta forma de hacerlo si funciona, bueno a mi me ha funcionado. Gracias amigo
Hola he tratado de utilizar este "truco" y me marca un error cuando trato de guardar la plantilla.. uso la MINIMA WHITE (bueno con algunas modificaciones de color etc etc)
en el caso de el codigo:
div class=’post-body’
no me aparece como tal.. y mira que lo he buscado.. supongo que lo mas cercano que encuentro es esto:
div class='post-body entry-content'
podrias echarme una mano?
GRACOAS!
Me sirvió de mucho el post y realmente funciona a la perfección. Muchas gracias.
por fin encontre la manera correcta de hacerlo, consulte otros lugares y no daban el resultado esperado y le daban mas vueltas al asunto, gracias.
www.areacatracha.com
Hola , me salio todo ok , sin error , solo que tengo un pequeño inconveniente que no puedo resolver , encima de mi post sale esto :
expr:id='"post-" + data:post.id'>
No se como puedo hacer para quitarlo y que esta mal hecho , por favor alguién podría ayudarme mcuhas gracias .
Perfecto!!! Me quedo barbaro... despues de probar de otras maneras (donde siempre me salia el "leer mas" en todos los posts) encontre este que funciona de maravilla...
MIL GRACIAS!!!
(Por cierto... si lo quieren ver funcionando, lo pueden hacer en http://dosminutosmas.blogspot.com )
Hola, por motivos desconocidos no existe class=’post-body’ en mi plantilla. Alguien sabe porqué? He buscado por toda la red y sigo igual.
Un saludo
Ei Jaime, me ocurrió lo mismo que a ti, creo que es porque han cambiado las sintaxis de blogge.
Echale un vistazo aquí:
http://www.oscargp.net/2008/04/agregar-leer-mas-o-un-read-more-al-blog.html
Funciona a la perfeccion, pero como podria hacerlo para que se vea al lado derecho?? y no al lado izquierdo??
aproposito, para los que no encuentran el codigo:
class='post-body'
busquenlo con este nombre:
class='post-body entry-content'
saludos
jejeje me eh dado cuenta que usando ese codigo me muestra en todos los post "LEER MAS" yo solo queria agregarle el "leer mas" solo a los post extensos, no de forma general
Befkaver, si implementas el código correctamente no debería aparecer el "Leer más" en todas las entradas. El problema conocido de este código ocurre cuando se revisa el historial del blog, pero incluso este error ya no me ocurre a mi (tengo implementado el código en este blog).
Admin, para poner del lado derecho el "Leer más", encierra el código:
<a expr:href='data:post.url'>Leer más...</a>
entre las etiquetas
<div style='text-align: right;'>
</div>
de esta manera:
<div style='text-align: right;'>
<a expr:href='data:post.url'>Leer más...</a>
</div>
Despues de tantos intentos viendo consejos de todo mundo, finalmente me he encontrado aqui la solucion exacta a lo que queria y ademas funciono a la primera!!
Gracias Man
hola que tal una consulta... el codigo que va debajo de head lo borraron de la pagina a la que dirigia el link ALGUIEN PODRIA FACILITARME ESA PARTE DE CODIGO? se los agradeceria muchisimo un saludo
Listo, el link del código del header ya fué actualizado. Disculpen el inconveniente.
Hola.
Disculpe, el código que esta (en este link) no abre.
Por favor, puedes ayudarme.
Gracias
lusya, probablemente el link no te funcione porque estás viendo la página desde Internet Explorer. El link que puse en este otro link (también está en el post) debería servirte. De todas maneras, te recomiendo que cambies tu navegador a Mozilla Firefox (descárgalo desde www.mozilla.com), para que veas la mayoría de las páginas Web sin inconvenientes.
no encuentro ninguna de las dos posibilidades en mi plantilla, ni class='post-body' ni class='post-body entry-content'. mi blog es http://camisetaroja.blogspot.com
y si no te importa te pego a continuacion mi codigo a ver si encuentras la forma de solucionarlo (luego puedes borrar los comentarios para que no ocupen espacio que seria inutil para otros visitantes de tu blog).
muchísimas gracias por tu tiempo y por echarnos una mano. :)
maldición! no me deja pegar codigo aqui... qué solucion se te ocurre¿?
un saludo
Al fin me funcionó como quería! Muchas gracias =)
Lo probé en la plantilla por defecto del blog y funciona a la perfección. Pero ahora he puesto un theme distinto y el código no es igual, así que no consigo hacerlo funcionar.
En lugar de
[div class='post-body']
[p] [data:post.body/] [p]
en la plantilla de mi theme es
[div class='entry']
[p] [data:post.body/] [/p]
así que no consigo insertar el código correctamente. Puedes echarme una mano?
Perfecto!!! Visite muchos otros blog buscando este codigo, pero ninguno funciono, en cambio este SI FUNCIONO!! Te lo agradezco!!
Pasen a ver mi blog kennyvasquez.blogspot.com
muchas gracias me funcionó perfecto!
Ya lo tengo instalado. Lo que quiero saber es cómo hago para que sólo aparezca cuando yo quiero... tengo algunos post cortos q no lo requieren, pero me aparece igual. gracias!
DISCULPAME, ME PODRIAS AYUDAR, PORQUE HAGO TODO PERFECTO Y CUANDO PONGO GUARDAR ME SALTA ESTE 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: Element type "div" must be followed by either attribute specifications, ">" or "/>".
Saludos, a todos, yo he seguido todo los pasos indicados pero tengo un inconveniente, el link de "Leer mas", no funciona.
Gracias por el aporte; me funciona perfectamente.
Acabo de migrar de worpress a blogger hace poco y estoy aprendiendo HTML y CSS (intentaré "descifrar" lo que he hecho... para comprenderlo)
Saludos!
genial, hoy en la noche pruebo
Wordpress hace todo eso con solo presionar un botón. Blogger es un servicio pésimo.
Gracias, funciona perfecto, y sin el molesto problema conocido del "Leer más..." que aparecía en todas las entradas aún sin que lo quisiéramos :-)
Un saludo.
Totalmente de acuerdo con MythomizeR. Por fin encontre la explicación perfecta y encima funcionaaaaaaaaaa!!!!!!!!!!Muchas graciassssss.
Saludos.
FUERZA Y HONOR.
A mi me funciona mal... Si abres mi blog en explorer se ve bien, pero si lo abres en cualquier otro navegador se ven las entradas por completo :(.
Hola, me encantaria poner este truco pero...
-primero me sale:
class='post-body entry-content'
así que lo incorporo a continuación.
-y segundo, cuando he copiado todo y quiero salvar me salta este texto de 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: Element type "div" must be followed by either attribute specifications, ">" or "/>".
Por favor ayuda!!
Gracias
noelia, según otros comentaristas introducir el código en class='post-body entry-content' es igual a introducirlo en class='post-body'.
Con respecto a lo segundo, verifica que no hayas borrado ninguna sentencia al introducir el código nuevo, y que hayas copiado el código completo, debería funcionar bien.
Gracias, gracias!!!!
solo tengo un problemilla.... jiji
El texto "leer mas" me aparece en ingles!? que puedo hacer para que salga en español?
Ya no hace falta que me contestes, ya lo he cambiado. Gracias de nuevo por estos post, vienen muy bien para los que no tenemos ni idea!
Que tal, he intentado poner los codigos pero no me ha funcionado. Cuando pongo guardar o vista previa me salta un error.
Otra cosa, estuve viendo bien el codigo, y en ningun lugar dice "Leer más" de seguro que debe ser un error mio.
Tambien puede que salte este error de no aceptarme los codigor, por ser una plantilla modificada.
Si tienes tiempo o no es molestia puedes ayudarme?
Un saludo y gracias por la ayuda igual :D
Hola, lo primero dar gracias x el truco, pero solo una cosa.
A mi me fnuciona, pero sin embargo al utilizarlo deja de verse el blog en internet explorer.
http://moneandoando.blogspot.com
a ver si alguien me puede ayudar
Hola:
Me sale el comentario, luego "LEER MAS", pero me aparece debajo otra vez todo el texto, sin pulsar.
¿Sabeis el fallo?
GRACIAS
muchas gracias, todo a la perfeccion. como alguien dice por ahi, es despues de entry content
saludos
Genial explicación. Funciona excepto con los videos. Si tengo colgado algún video el texto si aparece oculto, pero el video no. Y siempre aparece el Leer Más detrás de este video.
Es decir, que si tengo un texo de tres párrafos y un video al final, quedan ocultos, por ejemplo, 2 de los 3 párrafos y el video si aparece en la home. Quedando el leer más detrás del video. Esto lleva a error.
¿Podrías ayudarme?
Un saludo y gracias!
A mi no me parece el class='post-body y ni entry-content
MUCHA PERO MUCHAS GRACIAS
CAMBIE DE PLANTILLA Y LA NUEVA ME DIO BATALLA CON EL LEER MAS
NO PODÍA IMPLEMENTARLO SEGUÍ MIL EXPLICACIONES SOLO ME SIRVIÓ LA TUYA GRACIAS
UN BESO MUY BUENA EXPLICACION
Me aparece "Leer mas", pero despues cuando pongo el codigo en la entrada me aparece todo lo escrito junto por favor si alguien me puede ayudar
Muchas gracias!!! pensaba mudarme a live journal pero tu tutorial me permitio lograr cortar las noticias!!! en serio!! gracias eres epic@
Buena explicación pero no deja de ser una solución chapuza para un sistema tan grande como blogger. Un saludo.
Gracias
Gracias... :D
¿Como haces para que las personas puedan dejar comentarios asi!! :D?
Hola. Estoy empleando este código, pero en el caso de "expandir/contraer" no me funciona, y si uso el otro, aparece el "Leer más" en todas las entradas, hasta en las cortas. ¿Cuál es la solución? Gracias de antemano.
Vertvipere, revisa que hayas seguido todos los pasos correctamente. Puede ser que este truco presente inconvenientes con algunas plantillas de Blogger, aunque no lo he confirmado. También, visualiza tu blog usando Mozilla Firefox u otro navegador Web en vez de Internet Explorer, ya que Internet Explorer no sigue todos los estándares para la presentación de documentos Web.
Oscar, qué bien que te haya sido útil este truco. Lo de los comentarios incrustados en la página espero publicarlo muy pronto.
Muchas Gracias por este POst, me fue de gran utilidad
oye men ami no me sale lo de post body como le hago????
hola pues ami ya me salio y todo solo que con un inconveniente que cuando le doy en leer mas no sale lo que puse en la segunda partes U.U
y ya eh checado de colocarlo correctamente colocado
la primera nates del span id="fullpost" y la segunda despues /span>
Me gustó mucho el post y además me funciona a la perfección, felicitaciones
Hola a mi no me apareció el div class='post-body' en mi plantilla, pero lo pueden colocar después de div class='entry' de igual forma, si es que tienen una estructura similar en la plantilla. De resto se sigue el procedimiento descrito en el post. De todos los códigos, este es el que me ha funcionado. Gracias!
Chevre despues de vario intentos me sirvio!
Gracias por tus artículos.
Muy claros y muy fáciles de implementar en Blogger. Funcionan muy bien.
TODO FUNIONA PERO CUANDO LE DOY EN LEER MAS.. ME SALE TODO EL POST PERO YA NO APARECE LA CAJA PARA DEJAR COMENTARIOS!!! ... GRACIAS!
POR FAVOR A VER SI ME AYUDAS ! GRACIAS!
Hey mi blog no tiene el div class=’post-body
Que hago como le hago ???
a mi me sale el siguiente error:
Element type "div" must be followed by either attribute specifications, ">" or "/>".
Y ya lo he reecho 3 veces a las explicaciones, me encantaria que pudieras ayudarme!
depues de tratar un rato funko perfecto
ola me a funcionado perfectamente y le añadi unos iconos pero mi cuestion es la siguinte como puedo hacer que cuando le de a leer mas al expandirse el icono de atras no aparesca abajo del todo del post, es decir que le de a leer mas y en donde estaba leer mas estre atras para que los usuarios no tengan que ir abajo del todo del post para encojerlos de nuevo
Saludos
por si acaso quiere verlo mi blog es
http://musicaparatusoidoserabelito.blogspot.com/
hola! tengo un problema! el truco me funciona en internet explorer correctamente pero en mozilla no!
alguien puede saber porque?
Saludos!
Muchas Gracias, me ha funcionado, perfectamente, exceptp en algunas entradas, que blogger me ha creado la etiqueta un monton de veces. Lo intentaré arreglar.
Y lo iré poniendo en todas las entradas antiguas.
Echale un vistazo , para que veas como me ha quedado:
http://pongo-mi-voz.blogspot.com/
Un saludo
HOmbre eres una pistola, me sirvio exelentemente bien.. mil gracias!!...=D..
Saludos!!
Lo había estado probando por diferentes códigos, en otros blogs y páginas y nada... He probado dos veces con tu explicación y a la tercera ha funcionado! Muchas gracias =).
MUCHAS PERO MUCHAS GRACIAS POR LAS AYUDAS SOLIDARIAS. Esto del "Leer Más" es algo necesario, es raro que no esté en el diseño original. Felicitaciones, gracias!
muchas gracias, excelente informacion, bastante sencillo de hacer y mejor explicado aun.
hola, tengo una duda... al principio me funciono de maravilla pero a partir del 3 post ya no me funciona me aparece el leer mas hasta abajo de todo lo que escribi
TENGO UNA DUDA, EL TEXTO DE LEER MAS, ME APARECE ABAJO TODO LO QUE HE ESCRITO EN LA ENTRADA... LO QUE YO QUERIA ERA REDUCIR EL TAMAÑO DE LAS ENTRADAS, PERO (LAS ENTRADAS SIGUEN ESTANDO AMPLIADAS)
SE ME HA COMPLICADO AGREGAR ESA OPCION DE LEER MAS EN MI PLANTILLA :S
HE TRATADO DE DISTINTAS MANERAS PERO NO HE PODIDO
TE AGRADECERIA MUCHISISISMO! SI ME PUDIERAS AYUDAR PONIENDO ESA OPCION EN MI PLANTILLA :$
GRAAAAACIASSSS!!!!
Amigo olvidé dejarte la dirección de mi blog
http://michh-gomez.blogspot.com/
porfavor espero me ayudes gracias
salu2!
me mudé de pagina web, (es la misma plantilla) solo cambia la dirección ...
es: http://mich-descargas.blogspot.com/
Hola. Te felicito por el blog, es muy util y esta claro. Ademas hace tiempo que estaba tratando de incorporar el famoso "leer mas" y no podia. Aqui, finalmente pude.
Consejo para los que no encuentres la etiqueta div class=’post-body’
: directamente copien de aqui todo el script, icluido eso y reemplazenlo competo en su plantilla. A mi me funciono asi.
Si lo quierne probar y no me explique muy bien: altoroporlasastas@hotmail.com
Muchas gracias.
Fantástica aportación, y funciona perfectamente.
Felicidades,
hice todo o que decia. me esconde la segunda parte que qiero esconder y en el post me sale el seguir leyendo pero pero pero al momento de darle click para que aparesca no me direcciona a la segunda parte. ayudenme por favor plisssssssssssss
mejor explicado no pudo estar, muchas gracias por tu tutorial.
Abrir el presupuesto se prevé para el atributo "(1)" asociado con un tipo de elemento "clase".
me tiro este mensaje, lo traduci al español
si alguien me puede ayudar se lo agradeceria
c.nene@hotmail.es
Gracias!!!!! este post está como caído del cielo.
Hola aplique este efecto el que se abre en otra pagina, pero hoy me di cuenta que en el navegador google chrome no se muestra el efecto si no que sale todo de una vez.
Hola.
me gustaria saber como eliminar la barra de buscador de blogger que se encuentra en la parte superior del blog.
gracias
Ademas de intertar varias veces no me resulta el codigo :(
bueno gracias de todas maneras
Me funcionó: pero tuve que adivinar algo. Deberías de decir que el texto despues de esto: ...body' . Debe de borrarse y quedar tal y como tu lo pones.Porque allí aparece algo despues de body y si lo dejas, no funciona. muchas gracias.
Publicar un comentario en la entrada