Post Expandibles en Blogger

La página principal de su Blog muestra generalmente el contenido completo de sus post. Esto ocasiona que, si los mismos contienen más de 2 párrafos, su visitante encuentre dificultad para seguir la lectura de los mismos porque necesita trasladarse demasiado hacia abajo por la página.

En esta ocasión vamos a aprender un sencillo truco para crear un resumen expandible de sus entradas de manera que al hacer click en "Continúa Leyendo", la totalidad del post aparecerá en la página.

En primer lugar ingresamos a Personalizar - Plantilla - Edición de HTML y hacemos click en Expandir plantilla de artilugios y realizamos una copia de seguridad de la plantilla, para poder corregir cualquier error que cometamos sin perder la información que contenía el Blog.

 Luego buscamos en la plantilla el </head> y colocamos antes del mismo el siguiente código:

<script type='text/javascript' src=
'http://www.anniyalogam.com/widgets/hackosphere.js' />

A continuación recorremos la plantilla hasta encontrar lo siguiente:

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

y lo reemplazamos por este código:

<b:includable id='post' var='post'>
  <div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title'>
      <b:if cond='data:post.url'>
        <a expr:href='data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
      </h3>
    </b:if>

   <div class='post-header-line-1'/>

   <div class='post-body'>

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

        <p><data:post.body/></p>

     <b:else/>
        <style>#fullpost {display:none;}</style>
        <p><data:post.body/></p>
        <span id='showlink'>
          <p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Continuar Leyendo...</a></p>
        </span>
        <span id='hidelink' style='display:none'>
          <p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Volver al Resumen...</a></p>
        </span>
        <script type='text/javascript'>
          checkFull("post-" + "<data:post.id/>");
        </script>
     </b:if>

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

Hacemos click en Guardar Plantilla y finalizamos la primer parte.

Ahora cada vez que realizemos un post en el que necesitemos utilizar el truco, debemos colocar en HTML <span id="fullpost">al finalizar la parte que quieras dejar como resumen .

Luego al finalizar el post por completo colocas </span>  

Y ... listo ya puedes disfrutar de tus Post Expandibles.

29 Se Comunicaron ...

Make A Comment
top