lunes, 8 de junio de 2009

El Truco De Leer Mas En Blogger


A continuación explicaré un procedimiento cuya efectividad he verificado personalmente (puedes ver la prueba en www.zonazoft.com). 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:
<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.

0 comentarios:

Publicar un comentario

 

Copyright 2008 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol dot com