viernes, 13 de febrero de 2009

"Leer más" solo en los post escogidos

Me he encontrado en Blogger Magz con una nueva forma de aplicar el "Leer más" solo a las entradas que queramos mediante el uso de javascript.

A juzgar por los comentarios de allí parece ser que no da el problema de otros "Leer más" anteriores, que aparecía en todas las entradas a pesar de no incluir el código en las mismas.

Yo misma lo he instalado en un blog de pruebas y parece ser que así es, que el "Leer más" solo es visible en las entradas en las que incluyamos el código para el efecto.


[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 :

<b:if cond='data:blog.pageType == "item"'>

<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(&#39;span&#39;);

var found = 0;

for (var i = 0; i &lt; spans.length; i++) {

if (spans[i].className == &#39;fullpost&#39;) {

spans[i].style.display = &#39;none&#39;;

found = 1;

}

if (spans[i].className == &#39;showlink&#39;) {

if (found == 0) {

spans[i].style.display = &#39;none&#39;;

}

}

}

}

</script>

</b:if>

[2] Localizamos ahora esta parte del código de la plantilla:

<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.

Y lo cambiamos por este otro:

<div class='post-body' expr:id='"post-" + data:post.id'>

<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(&quot;post-<data:post.id/>&quot;);

</script>

</b:if>

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

</div>


[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:

Parte de la entrada que estará a la vista



<span class="fullpost">



El resto de la entrada que estará oculta hasta pinchar en el "Leer más"



</span>



El resto de la entrada que estará oculta hasta pinchar en el "Leer más"

[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.

No hay comentarios:

Publicar un comentario