Pages

Subscribe Twitter

28 octubre 2007

Expandir post en blogger

Otra alternativa a la entradas muy extensas en blogger. Con el truco anterior de leer más habian algunos problemas, por ejemplo, que en todas las entradas aparece el enlace a "seguir leyendo o leer más" aunque no hubiera nada mas que leer, por lo tanto las entradas antiguas que no tenian la modificacion del post con el codigo, tendrian un enlace innecesario.

Con este truco podrás esconder parte del texto en algunas entradas que sean muy extensas sin tener que volver a cargar la página. Puedes ver un ejemplo aquí.

Lo primero que haremos es ir a plantilla > edicion html y "expadir plantillas de artulugios".

[Actualizado] Habia un error en el siguiente codigo, disculpas! ahora esta bien :)
Antes de </head> pegamos el siguiente código:

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

Ahora buscarémos el siguiente código:

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


Lo seleccionamos todo y lo reemplazamos por este:

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
<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 + "\");"'>SEGUIR LEYENDO [+]</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>MINIMIZAR [x]</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Lo que esta en rojo son los texto que aparecerán para expandir y contraer, puedes cambiarlos por el que quieras, o si quieres agregar una imagen, sustituyelos por el codigo para agregar una imagen:

<img src="http://direcciondeimagen.gif"/>

Ahora, cuando desees que en una entrada aparezca el "expandir", deberás "encerrar" el texto que no aparecerá entre estos codigos en la edicion de HTML del post:

Primer texto, el que si se ve.
<span id="fullpost">
Texto escondido, el que aparecerá al hacer clic en Expandir
</span>

Eso es todo, cualquier duda, pregunten ^^

39 comentarios:

maceirax dijo...

Error después de seguir las instrucciones al pie de la letra:

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 "script" must be followed by either attribute specifications, ">" or "/>".

No veo ninguna etiqueta abierta.

Por otra parte, la parte de código que hay que sustituír no es exactamente igual en mi blog.

Deathly dijo...

mmm debe haber quedado algo abierto por ahi... si quieres dame tu msn por "contacto" arriba y tratamos de solucionarlo ^^

Editor dijo...

Sobre la consulta de maceirax, tuve el mismo mensaje de error, y lo solucione prestando atencion a un >/b:...< algo asi que estaba justo arriba y habia borrado al sacar el codigo. Asi lo arregle.

Tengo una consulta: en el post dices que en este caso no aparece "leer mas"si no hay mas texto, pero en el mio me tira por "defecto" un "leer mas" en cada uno de los que estan publicados, sin que yo tenga chance a modificarlos en el codigo. Lo otro es que al pinchar sobre el enlace, no pasa ABSOLUTAMENTE NADA! se queda en "javascript:void(0)", mi direccion es: pirinews.blogspot.com, a ver si me ayudas porfa!!!

Deathly dijo...

Creo que me acabo de dar cuenta que me he equivocado, sorry

El codigo que va antes de </head> estaba mal! :O! este es el correcto:

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

Disculpas :(

Ispilatze dijo...

¡Ayúdame por favor!

Sigo tus instrucciones y después de pegar lo que dices antes de "head" (esto sí sé,jeje) me atasco, porque la tira de código que hay que sustituir en mi plantilla no es igual que la que tú indicas. Te copio lo que tengo:

b:includable id='post' var='post'>
div class='post hentry uncustomized-post-template'>
a expr:name='data:post.id'/>
b:if cond='data:post.title'>
h3 class='post-title entry-title'>
b:if cond='data:post.link'>
a expr:href='data:post.link'>data:post.title/>/a>
b:else/>
b:if cond='data:post.url'>
a expr:href='data:post.url'>data:post.title/>/a>
b:else/>
data:post.title/>
/b:if>
/b:if>
/h3>
/b:if>

(NOTA: he borrado todos los "<" de entrada porque al subir el comentario me dice que "su html no es aceptable" pero te harás una idea...jeje)

Así pues, no sé qué parte seleccionar, o si seleccionar todo... o qué! Y como mis post son larguísimos (mucho texto, jeje) pues como que me vendría muy bien hacerlos "explandibles".
He intentado previamente el otro método (supongo que al que te refieres en esta entrada) y tampoco. Soy muy novata pero muy tenaz, así que con un poco más de ayuda... ¿Te importaría un contacto directo? ¿me das tu correo? ¿¡me ayudas POR FAVOR!??? ispilatze@gmail.com / ispilatze@hotmail.com
Gracias de antemano!! :) :) :)

Deathly dijo...

Oki ispilatze te respondo por msn ^^
Lo intentaremos hasta que lo logremos!

Alejandro Stabilize dijo...

sucede que no me funciona el codigo:

www.mapetiteprincesse.blogspot.com

solo me aparece Seguir leyendo, anteriormente utilizaba el codigo (desde otra fuente) con la otra versión de blogger y no me daba problema, ahora con este código que proporcionas no funciona... acaso debo esperar a crear un nuevo tema?

Deathly dijo...

Alejandro editaste los post con:

Primer texto, el que si se ve.
<span id="fullpost">
Texto escondido, el que aparecerá al hacer clic en Expandir
</span>

Si no te resulta, haz clic aqui y me das tu msn para solucionarlo
salu2

Oscar Pilichi C. dijo...

Genial te has pasado muy util el truquito, muy estetico.

Deathly dijo...

Si... Me gusta más que el "Leer mas" que tengo yo, pero me da flojera cambiarlo =P

isaias_master dijo...

muy bueno el codigo y si funciona.

Ahora viendo ese codigo se me antoja algo mas. Quisiera que en vez de expandir el texto me enviara a la entrada, solamente esa entrada.

isaias_master dijo...

Realmente me sirvio mucho el codigo. ya hace un buen rato andaba buscando un codigo asi porque yo pongo fotos y aveces en cada entrada pongo hasta 20 fotos y tarda mucho en cargar la pagina entonces con esto solo dejo a la vista dos y las demas ocultas. Realmente Gracias!!!!

King! dijo...

a mi no me funciono
hay ke tener alguna plantilla en especial?

Deathly dijo...

He visto tu blog y creo que si te funciono :)

Igna dijo...

Te felicito, llevo dias buscando esta solucion y gracias a ti la he encontrado.

Conrado Martinez dijo...

FUnciona Genial! Gracias!

愛Reina_Tanaka爱 dijo...

hola la verdad sq el codigo esta genial peor quiciera q aparesca en el centro pero no puedo no s q pasa podrias explicarme como hago eso? gracias de antemano

Ab Exordio Vitae dijo...

hola :D

mira hice esto y pues me salio bn, pero el problema es q cuando publico la entrada no me salen los links para expandir esa parte del texto, y se queda escondido siempre... q hago?

gracias...

acabe de ver si sale el link, pero al final del post, y lo que quiero es ponerlo en la mitad.. q puedo hacer.. graciasss de nuevo

Cato® dijo...

lo hice funcionar, pero si edito la entrada nuevamente, se pierde todo, y aparece el link al final de expandir/contraer, pero no hay texto, es decir, no se oculta

el link aparece debajo de todo el texto

Cato® dijo...

lo solucioné, es un conflicto de etiquetas "span" que blogger duplica o reemplaza al pasar de modo edicion, a modo html, será cuestion de aprender a convivir con ello.

deivid dijo...

Lo siento no conguigo hacerlo, me sale que es error bX-g02hp5. Hago exactamente lo que pones y no lo consigo, si me pudieras ayudar te lo agradecería. Deivid202@hotmail.com

Roberto Mora dijo...

Muchas gracias por este post. Me ha sido de gran ayuda ya que llevaba tiempo queriendo poder expandir texto. Enhorabuena por tu blog

Cristian dijo...

Hola "recursospaces" me anduvo de maravilla el script, lo andaba buscando por todos lados..Muchas gracias, pero ahora necesito hacerte una pregunta: como hago para crear una entrada con varios de estos scripts dentro del post? lo trate de hacer pero el sript me lo toma como un solo artículo..me explique bien? Se puede hacer?

Chema Ajenjo dijo...

hola, primero felicidades por el blog...

quiero implantar el codigo en mi blog pero cuando lo hago funciona, pero me cambia la fuente y el tamaño del titulo del post... puedes echarme una mano?

Gracias!

mi correo es: mi6cientos.blog@gmail.com

Rebeca dijo...

Muchas gracias por este recurso, lo estuve buscando y gracias a ti lo aplique a mi blog.


Saludos.

Rosa Silverio dijo...

Hola.
Espero que estés muy bien.
Te escribo porque encontré la entrada en donde das el truco para expandir una entrada en blogger. Resulta que lo he probado en mi plantilla pero no me funciona y quería saber si podías ayudarme. Sé que es mucho pedir y sería un gesto de absoluta generosidad de tu parte, pero he probado con otros trucos y ninguno me ha funcionado hasta la fecha y la verdad es que este recurso me sería muy útil. Mi página es www.rosasilverio.com

Te estaría infinitamente agradecida. Si puedes me escribes a mi correo: rosasilverio(arroba)hotmail.com

Gracias anticipadas.

Posdata: Intenté enviarte un mensaje a través del formulario de contacto pero siempre me daba error.

Nozomi dijo...

Hola ^^ Muchas gracias por su ayuda :)
Hace un tiempo utilicé esto en mi blog, pero ahora quiero quitarlo. Intento hacer lo contrario, borrar el código que puse y poner el antiguo, pero me da fallo T__T
Sabrías como hacerlo??
Muchas gracias de antemano :D

Alicia Castelo Loureiro dijo...

Hola!! En serio, muchas gracias por el código. Me pasaron algunos pero siempre me daba error, es el primero que me funciona ^^ El problema es que me aparecen las entradas dobles y cuando le das a expandir salen dos veces los artículos.
Te agradecería infinitamente que me dieras una posible causa para este problema, muchísimas gracias de antemano.

Alicia Castelo Loureiro dijo...

Estoy un poco histérica, la verdad, porque no guardé la plantilla anteriormente a hacer el cambio y ahora no soy capaz de arreglarlo... Me salen todas las entradas duplicadas.
A cualquier hora del día o de la noche, necesito tu ayuda, por favor,T.T
alicia.castelo.loureiro@gmail.com

Alicia Castelo Loureiro dijo...

Vale, no hace falta. Ya lo solucioné yo, no había borrado una parte de la plantilla ejem ejem U.U

Ricky Reds dijo...

muchas gracias me salio bien. Saludos

Jpz dijo...

Te "pasaste". Buen dato.
Lo andaba buscando y me sirvió mucho.
Gracias por el truco.

Jpz dijo...

Otra consulta.
Si bien me funciono el truco, lo otro es:
Como lo hago si quiero que solamente un "Parcial" del texto quede oculto, y luego continúe con mas textos sin ocultar?
Por ejemplo:
Texto visible.
Texto oculto.
(Leer mas)
Texto visible.

Me explique bien?

Mónica de María dijo...

Deathly, ayuda por fa !!!!!
intenté lo de entrar textos largos en mi blog.. y me resultó a la perfección, GRACIAS!!! pero querría usar este 2º truco que propones: tengo que volver todo atrás? volver a la plantilla original? o lo hago desde la modifiación ya hecha????
te agradezco mucho si me puedes responder...

Mónica de María dijo...

te dejo mi mail, por si me puedes contestar
monicademaria@gmail.com

Luciih dijo...

no me funciona :(,segui todo al pie de la letra y lo unico qe logré es qe se me despelotara mas el blog XD
me aparece 2 veces cada entrada :|

es una lastima xqe la vdd me parece muy bueno ese truco y me ayudaria un monton a la organizacion de mi pedorro blog ._. le urge la necesidad de estar mas ordenado(?) XD

x favor el qe sepa como solucionar este problema qe conteste ._.

The RydokX dijo...

Loco Tu Tutorial esta increible te mereces un Premio mira mi web quedo inpecablee.. Www.GoldenMusic.Net.Tc

Mr. Poett dijo...

Hola, no se que es lo que pasa, pegué todo como vos dijiste pero realmente no me funciona.. es decir.. me sale todo como cuando pego la parte de html, sin los botones.. solo el texto, alguna idea de porqué puede ser?

Gracias

Ivannova dijo...

Holaa :D
Gracias por el post.. me funcionó perfectamente :D

Publicar un comentario en la entrada

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