Blog and Web

Artículos expandibles dentro de las categorias de Blogger

Este es un script muy popular desarrollado por hackosphere que hace que desde la página de las etiquetas los artículos sean expandibles, es decir, que sólo se mostrara el título de la entrada y al dar click, se mostrara abajo el contenido.

  1. Entra a la pestaña “Plantilla” o también llamada “Diseño” desde el escritorio y después a la opción “Edición de HTML” donde activamos la casilla “Expandir plantillas de artilugios”.

  2. Buscamos el siguiente código:
    ]]></b:skin>
  3. Y justo después colocamos lo siguiente:
    <script type='text/javascript'src='http://blogyweb.googlepages.com/entradas-expandibles.js' />
  4. Ahora buscamos el siguiente código:
    <b:includable id='main' var='top'>
    <!-- posts -->
    <div id='blog-posts'>
    <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 == "item"'>
    <b:if cond='data:post.allowComments'>
    <b:include data='post' name='comments'/>
    </b:if>
    </b:if>
    </b:loop>
    </div>

    Y lo remplazamos con el siguiente:

    <b:includable id='PeekABooPost' var='post'>
    <div class='post uncustomized-post-template'>
    <table><tr>
    <td width='40px'>
    <a href='javascript:void(0)' title='Expande/Oculta este Artículo' style='text-decoration:none' expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"'>[+/-]</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>
    
    <b:includable id='main' var='top'>
    <!-- posts -->
    <div id='blog-posts'>
    <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.dateHeader'>
    <h2 class='date-header'><data:post.dateHeader/></h2>
    </b:if>
    
    <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <b:if cond='data:blog.pageType != "item"'>
    <b:include data='post' name='PeekABooPost'/>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>
    <b:else/>
    
    <b:include data='post' name='post'/>
    </b:if>
    <b:if cond='data:blog.pageType == "item"'>
    <b:if cond='data:post.allowComments'>
    <b:include data='post' name='comments'/>
    </b:if>
    </b:if>
    </b:loop>
    </div>
  5. Guardamos y listo.