Algo que siempre ocurre en un blog cuando los usuarios con menos experiencia lo crean, es que nunca utilizan la herramienta de "Leer Mas". Lo que termina pasando es que, tiene entradas sumamente largas en la página principal, y esta se vuelve mucho mas lenta y mas confusa para navegar.
Por eso, el día de hoy les traigo un minitutorial, tomando los códigos presentados en "El escaparate de rosa" para que puedan resumir sus entradas, utilizando al final de cada post, la famosa palabra Leer Mas.
Este método, tiene algo importante, y es que, es solo en post escogidos, osea que nosotros seleccionaremos la cantidad de palabras que se van a mostrar y que es lo que se va a ocultar.
Los pasos a seguir:
[1] En nuestro panel de Blogger, nos situamos en la pestaña de "Edición HTML" y marcamos la opción de "Expandir las plantillas de artilugios" para colocar este código justo antes de </head>:
<b:if cond='data:blog.pageType == "item"'>[2] Localizamos ahora esta parte del código de la plantilla:
<style>.fullpost{display:inline;}</style>
<b:else/>
<style>.fullpost{display:none;}</style>
<script type='text/javascript'>
function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].className == 'fullpost') {
spans[i].style.display = 'none';
found = 1;
}
if (spans[i].className == 'showlink') {
if (found == 0) {
spans[i].style.display = 'none';
}
}
}
}
</script>
</b:if>
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Dependiendo de la plantilla, la primera línea de este código podría verse así:
<div class='post-body entry-content'> o de alguna otra manera. Tomando como referencia el resto del código no será demasiado difícil localizarlo.
<div class='post-body entry-content'> o de alguna otra manera. Tomando como referencia el resto del código no será demasiado difícil localizarlo.
Y lo cambiamos por este otro:
<div class='post-body' expr:id='"post-" + data:post.id'>[3] Una vez guardados los cambios, para usar el "Leer más" hemos de colocar un pequeño código en cada entrada en la que vayamos a usar el efecto de esta manera:
<p><data:post.body/></p>
<b:if cond='data:blog.pageType != "item"'>
<span class='showlink'>
<p><a expr:href='data:post.url'>Leer más...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Parte de la entrada que estará a la vista[4] Podemos incluir el código en Opciones - Formato - Plantilla de entrada, así el código aparecerá automáticamente cada vez que vayamos a escribir un nuevo post, si en alguna entrada no queremos mostrar el "Leer más", solo tendremos que borrar el código.
<span class="fullpost">
El resto de la entrada que estará oculta hasta pinchar en el "Leer más"
</span>
