Posts expandibles, parte (II)

Esta entrada la dedicaremos al segundo método que conozco para expandir los post. Como hablamos en el artículo anterior, este método se diferencia en que el vinculo que adjuntemos a la entrada nos redireccionara a su página individual manteniendo oculto la parte del texto que deseemos en la página principal.

Recomiendo hacer una copia de seguridad del contenido de la plantilla antes de manipular la misma.

Este modo es muy similar al anterior dado que comparte parte del codigo JavaScript. Empezamos abriendo el Panel de control de nuestro blog y nos dirigimos a la pestaña Diseño a la sección Edición de HTML. Marcamos la opción de Expandir plantillas de artilugios, y mediante el acceso rápido Ctrl + F, buscamos la etiqueta </head> y antes de esta añadimos el siguiente trozo de código.

Posterior a esta incluimos el siguiente código.
<b:if cond='data:blog.pageType != &quot;item&quot;'><br /><script type='text/javascript'><br /><br />var fade = false;<br /><br />function checkFull(id) {<br />var post = document.getElementById(id);<br />var spans = post.getElementsByTagName(&#39;span&#39;);<br />var found = 0;<br />for (var i = 0; i &lt; spans.length; i++) {<br />if (spans[i].id == &quot;fullpost&quot;) {<br />spans[i].style.display = &#39;none&#39;;<br />found = 1;}<br />if ((spans[i].id == &quot;showlink<br />if ((spans[i].id == &quot;showlink&quot;) &amp;&amp; (found == 0))<br />spans[i].style.display = &#39;none&#39;;}}<br /><br /></script><br /></b:if>Este es el pequeño script que necesitamos, y el cual es parte del otro metodo.

A continuación buscamos estas líneas.

<div class='post-header-line-1'/>
<b:if cond='data:post.dateHeader'>
<h3 class='date-header'><data:post.dateHeader/></h3>
</b:if>
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/>
</div>

Y las sutituiremos por estas:
<div class='post-body' expr:id='"post-" + data:post.id'><br /><br /><b:if cond='data:blog.pageType == "item"'><br /><style>#fullpost{display:inline;}</style><br /><p><data:post.body/></p><br /><b:else/><br /><style>#fullpost{display:none;}</style><br /><br /><p><data:post.body/></p><br /><br /><span id='showlink'><br /><a expr:href='data:post.url'>Seguir leyendo...</a><br /></span><br /><script type='text/javascript'><br />checkFull("post-" + "<data:post.id/>");<br /></script><br /></b:if><br /><br /><div style='clear: both;'/> <!-- clear for photos floats --><br /></div>Con esto ya podemos guardar los cambios y para probar esta utilidad simplemente en el post que deseemos ponerlo en práctica haremos lo mismo que explique en el artículo anterior.
TEXTO VISIBLE<br /><span class="fullpost"><br />TEXTO OCULTO<br /></span>Si queréis que esta etiqueta salga automáticamente cada vez que abráis una nueva entrada, iros a la pestaña Configuración y en la sección de Formato tenemos una opción, Plantilla de entrada, en el final de la pagina que hace que incluya cualquier texto o código en cada nueva entrada. Para ello simplemente agregar el código anterior y listo.

Espero que os sea de utilidad y si teneis alguna duda no dudeis en comentarlo.