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

Leer mas

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

0 comentarios:

Publicar un comentario