Entradas expandibles en Blogger

Un efecto bastante vistoso, pues puedes hacer que las entradas se muestren expandidas o contraídas, para ahorrar espacio o simplemente por estética o por simple decoración. Puedes configurarlo para que sean por defecto o solo en las paginas de etiquetas y búsquedas.

/!\ Actualizacion 21/01/10: Se actualizo en el paso 3, la solución al problema de las páginas individuales de Blogger

[1] Para colocarlo simplemente debes dirigirte a Diseño>Edicion HTML>Expandir plantillas de artilugios y agregar las siguientes lineas de código antes de la etiqueta </head>, para cargar los archivos JavaScript, que contienen los códigos necesarios para el efecto de desplazamiento(Prototype.js y scripttaculous.js):

<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>

[2] Ahora solo tienes que buscar la siguientes lineas de código:

<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
   <b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>
</b:loop>

[3] Y reemplazar el código en rojo, por cualquiera de los siguientes códigos:

Antes de continuar si estás utilizando las páginas estáticas de Blogger y ya habías agregado este hack seguro tienes problemas con ellas. Para solucionar el que se muestre completamente dicha página, reemplaza el siguiente código: Por cualquiera de los siguientes códigos:

Para agregarlo a las paginas de etiquetas y búsquedas(con parche para paginas individuales):

<b:if cond='data:blog.homepageUrl != data:blog.url'>
  <b:if cond='data:blog.pageType != "item"'>
    <b:if cond='data:blog.pageType == "static_page"'>
      <b:include data='post' name='post'/>
    <b:else/>
      <b:include data='post' name='PeekABooPost'/>
    </b:if>
  <b:else/>
    <b:include data='post' name='post'/>
  </b:if>
<b:else/>
  <b:include data='post' name='post'/>
</b:if>

Para agregarlo como default:

<b:include data='post' name='PeekABooPost'/>

[4] Por ultimo necesitas encontrar algo parecido a la siguiente linea de código:

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'>

Y justo debajo de esta, colocar la siguiente:

<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr>
<td width='40px'><a expr:onclick='&quot;Effect.toggle(\&quot;&quot; + data:post.id + &quot;\&quot;,\&quot;slide\&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none' title='Mostrar/Ocultar'>[+/-]</a>
</td>
<td><h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
</td>
</tr></table>
<div class='post-body' expr:id='data:post.id' style='display:none'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
</b:includable>

En donde el texto color:

Rojo: Se cambia por inline, si se desea que las entradas se muestren expandidas por default, es decir, si esta en none, las entradas estarán comprimidas, pero si esta en inline, estas estarán expandidas.
Verde: Linea de código que se encarga de mostrar la entrada completa.

[5] PERO, si estas utilizando el truco de Leer mas...Nota completa, necesitas reemplazar el código verde por este otro:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<data:post.body/><a expr:href='data:post.url' expr:title='data:post.title'> ...Entrada completa</a>
</b:if>

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.