Muchas veces habéis visto el truco de expandir las entradas, con efecto o sin él. Pero en esos casos lo que se hacía era cargar el post entero, y luego mostrarlo. Pero, ¿por qué no dejarlo sin cargar, y cargarlo cuando lo fuéramos a expandir vía ajax (aka el feed jsonp de blogger). Podéis verlo en acción en un blog de pruebas.

Cómo usarlo

Para poder usarlo hay que hacer algunas modificaciones en la plantilla. El código se encuentra en <b:includable id='post' var='post'> tras haber expandido plantillas de artilugios. Buscad: <b:if cond='data:post.title'> y reemplazar hasta su correspondiente </b:if> (ambos incluidos) por:

    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:data-ajax-id='data:post.id'  expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:data-ajax-id='data:post.id' expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>

El truco está en el atributo data-ajax-id, que usaré para buscar esos links y que cuando se haga click sobre ellos se cargue en el correspondiente «post-body» el contenido entero o el resumen (dependiendo de lo que queráis) de la entrada.

Una vez hayáis hecho eso tendremos que comprobar que en nuestro <div class='post-body'> o <div class='post-body hentry-content'> tenemos asignada una ID, así que tendremos que reemplazar esa línea por <div class='post-body hentry-content' expr:id='"post-body-" + data:post.id'>. Además tendremos que verificar que no cargamos la entrada, por lo que quedará algo así:

    <div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
      <b:if cond='data:blog.pageType != "index"'>
        <b:if cond='data:blog.pageType != "archive"'>
           <data:post.body/>
        </b:if>
      </b:if>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

Para terminar, tendríamos que copiar el contenido de este script encima de </body>:

<b:if cond='data:blog.pageType != "index"'>
  <b:if cond='data:blog.pageType != "archive"'>
    <script type='text/javascript'>
      //<![CDATA[
        ...Aquí el contenido...
      //]]>
    </script>
  </b:if>
</b:if>

O si no poner:

<b:if cond='data:blog.pageType != "index"'>
  <b:if cond='data:blog.pageType != "archive"'>
    <script type='text/javascript' src='https://dl.dropbox.com/u/71679931/share/ajax_resumenes_blogger.js'/>
  </b:if>
</b:if>

Configuración

Bueno, este es un script con poco que configurar. He dejado una opción al principio (var contenidoParaUsar) que puede ser configurada como "content" o "summary", dependiendo de si queremos que salga toda la entrada o sólo el resumen con un link de leer más.

Dejar el primer post

Para hacerlo sólo habría que usar condicionales en la plantilla, de tal manera que el link al título no tuviera el atributo data-ajax-id y que aparezca por defecto el post-body usando la etiqueta data:post.isFirstPost:

El primer código quedaría así:

    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
       <b:if cond='data:post.isFirstPost'>
        <a expr:href='data:post.link'><data:post.title/></a>
       <b:else/>
        <a expr:data-ajax-id='data:post.id'  expr:href='data:post.link'><data:post.title/></a>
       </b:if>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <b:if cond='data:post.isFirstPost'>
               <a expr:href='data:post.url'><data:post.title/></a>
            <b:else/>
               <a expr:data-ajax-id='data:post.id'  expr:href='data:post.url'><data:post.title/></a>
            </b:if>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>

Y el segundo así:

    <div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
      <b:if cond='data:blog.pageType != "index"'>
        <b:if cond='data:blog.pageType != "archive"'>
           <data:post.body/>
        <b:else/>
          <b:if cond='data:post.isFirstPost'>
            <data:post.body/>
          </b:if>
        </b:if>
      <b:else/>
        <b:if cond='data:post.isFirstPost'>
          <data:post.body/>
        </b:if>
      </b:if>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>