Leer Más / Sólo Resumen

Algunas veces es bueno mostrar sólo el resumen de la entrada, en esos casos vendrá bien este widget para incorporar un "Leer Más...". Al pulsar mostrará el resto de la entrada y al final encontraremos un "Sólo Resumen" para volver a mostrar sólo el resumen.

Antes de </head> copiar este código:


<b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}


function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
spans[i].style.display = 'none';
}
}

</script>
</b:if>

Después buscamos b:includable id='post' y en lugar del código que va de:

<b:includable id='post' var='post'>

a...:

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

pegamos este código:

<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 + "\");"'>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 + "\");"'>Sólo Resumen...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


Por último vamos a Configuración -> Formato y en Plantilla de entrada copiamos:

Escribe aquí el Resumen
<span id="fullpost">
Escribe aquí el resto de la entrada
</span>

Esto saldrá al crear una nueva entrada, escribimos el Resumen donde dice "Escribe aquí el Resumen" y el resto de la entrada donde dice "Escribe aquí el resto de la entrada" dejando el resto en esa posición. posición.

12 comentarios:

Iñaki

Buenas!

he intentado incorporar este widget a Blogger, pero me da problemas, ya que me coloca al final del post el "leer más".

Lo cierto es que es algo que me ha ocurrido con todas las versiones que he encontrado (ya sea expandible dentro de la misma página, como la versión que permite crear un link a otra página para seguir leyendo).

El modelo de mi plantilla es la 897 de blogger y me gustaía saber si serías capaz de ayudarme, pues llevo más de un mes buscándole solución.

Muchas gracias y felicidades por el blog.
Iñaki

jesgo

Iñaki, normalmente funciona bien pero en algunas plantillas al justificar el texto a derecha e izquierda (como veo que haces tú en tus posts) incorpora algunos códigos que distorsionan el "Leer más".
Primero prueba a aplicarlo a un post sin justificar el texto y en caso de que persista el problema debes entrar en el post en modo html y eliminar los códigos (div o align) que haya aplicado Blogger de más.
No sé si me he explicado correctamente, si necesitas más detalles no dudes en volver a comentarme.
Un saludo.

Iñaki

Está clarísimo... lo que ocurre es que en su día lo logré en mi blog de pruebas y ahora no sale...

He probado lo que comentas, pero aún así, tampoco me va :P Si te ocurre a qué se puede deber?

El blog de pruebas es:
http://prufungblog.blogspot.com/

Ya me dirás :)

Muchísimas gracias, no veas la de quebraderos de cabeza que me está dando el tema :P

Salu2,
Iñaki

jesgo

Iñaki, creo que te ocurre más o menos lo que te decía. Por alguna razón, que debe ser imputable a la estructura de tu plantilla y otras, al crear tus posts se crean algunos <div> y </div> que interfieren en el <span="fullpost"></span>.
En mi blog de pruebas jesgopru23 he puesto tu post para que veas que funciona correctamente.
Te diría que entraras en tu post en modo html y eliminaras todos los <div> y </div> que encuentres y que veas si funciona el "Leer más". Después continua editando el post con márgenes y demás.
Espero que te funcione, si no es así me comentas de nuevo y te mando el html del post que he puesto en mi blog de pruebas.
Saludos.

Abel3D

Hola, lo instalé sin ningun problema, muy bueno, lo que estaba esperando, gracias por el dato, pero me surgió un problema a raiz de esto, no me salen las entradas con las fechas de publicacion y hora, no se puede ver en que dia fueron publicadas porque en la pagina principal del blog no sale las fechas, todo bien pero menos las fechas, hay alguna forma de corregir????, saludos.

jesgo

Abel3D, yo veo perfectamente la fecha y la hora debajo del título de las entradas, supongo que habrás modificado algo.
Saludos.

Abel3D

Hola Jesgo, NO, la fecha que vez la pongo manualmente dentro de cada entrada, porque justamente no me sale automaticamente como antes, la fecha que vez en cada post la pongo dentro del texto de cada entrada manualmente.

Abel3D

Hola Jesgo, una consulta, en un widebar doble quisiera poder poner doble pestaña con c/u con informacion, o sea, en el sidebar a la izquierda que se vea el titulo del gadget y a la derecha el otro titulo en donde si se hace click en uno u otro la informacion del gadget cambia en el mismo espacio, como en el ejemplo de esta direccion,

http://www.google.com.ec/ig/directory?type=gadgets

en la parte de arriba hay 2 pestañas GADGETS y TEMAS, si das en un titulo o en el otro siempre saldrá la informacion en el mismo espacio reemplazandose, hay forma de hacerlo? y como.

Abel3D

O como en este ejemplo en las pestañas de la derecha de mas abajo "autores, comentaristas"

http://www.xatakafoto.com/

jesgo

Abel3D, no hay ninguna razón para que este truco afecte a que no se vea la fecha. Si lo deseas mándame a mi email listado de plantilla y entrada y le echaré un vistazo.
En cuanto al tema de los tab o pestañas estoy preparando una entrada sobre ese tema.
Saludos.

Lenin Santana Redman

antes de todo gracias por este post, y aunque es el que mas se le ha acercado a lo que necesito lamentablemente no me trabaja, pero la verdad estuvo muy pero muy cerca, me gustaría en lo que fuese posible me dieras una manita, usé casi todo al pié de la letra hasta que me salió una linea que no encontré y tuve que usar un poco de ingenio, donde al final todos mis post me salieron repetidos (2 veces) y me remueve las fechas y horas en que fueron colocados, me gustaría que me digas en que pude haber fallado pues la verdad de todos los que he intentado ha sido el que mas cerca estuvo.... mil gracias

Lenin Santana
http://soportenme.blogspot.com

jesgo

Lenin Santana Redman, por lo que he podido ver tu plantilla está muy elaborada, quiero decir que no tiene la estructura básica de las suministradas por blogger, con partes demasiado distintas. Me temo que para hacer funcionar este truco habría que modificar demasiadas cosas. Te recomiendo otras plantillas de Halcon Hive que ya llevan implementado el truco.
Saludos.

» Escribe tu comentario aquí:


Si quieres hacer alguna consulta sobre tu blog habilita tu perfil o deja un enlace a tu blog:
<a href="url-de-la-página">Texto enlace</a>

» O utiliza el antiguo formulario


Los comentarios están siendo moderados y publicados lo antes posible.



jesgo23 ©2008/2009 | Plantilla Blogger | Diseño jesgo Creative Commons License