Expandir y contraer los archivos del blog.

Esta es una aplicación con la cual ganaremos espacio en nustra sidebar. A medida que pasa el tiempo vamos agregando entradas en nuestro blog hasta que vemos una inmensa lista de entradas que no tiene fin, y que realmente, a mi modo de ver, le dan al blog un aspecto no deseado. He tomado "prestado" de uno de los grandes maestros, El Escaparate, una de sus entradas al respecto.
Como primer paso, accedemos a nuestra plantilla de la forma habitual, nos vamos a EDICION HTML, y con nuestro buscador de códigos en la plantilla (CTRL+F), ubicamos, sin expandir artilugios el siguiente código:

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>

Sin pensarlo dos veces lo borramos, y colocamos en su lugar el siguiente código:

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'>

<b:includable id='main'>

<script type='text/javascript'>

//<![CDATA[

if(typeof(rnd) == 'undefined') var rnd = '';

rnd = Math.floor(Math.random()*1000);

rnd = 'id-' + rnd;

document.write('<a href="#" onclick="tmp = document.getElementById("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;" style="float:left;margin-right:5px;">');

//]]>

</script>[+/-]

<script type='text/javascript'>

//<![CDATA[

document.write('<\/a>');

//]]>

</script>

  <b:if cond='data:title'>

    <h2><data:title/></h2>

  </b:if>

  <div class='widget-content'>

<script type='text/javascript'>

//<![CDATA[

document.write('<div id="' + rnd + '" style="display:none;">');

//]]>

</script>

  <div id='ArchiveList'>

  <div expr:id='data:widget.instanceId + "_ArchiveList"'>

    <b:if cond='data:style == "HIERARCHY"'>

     <b:include data='data' name='interval'/>

    </b:if>

    <b:if cond='data:style == "FLAT"'>

      <b:include data='data' name='flat'/>

    </b:if>

    <b:if cond='data:style == "MENU"'>

      <b:include data='data' name='menu'/>

    </b:if>

  </div>

  </div>

<script type='text/javascript'>

//<![CDATA[

document.write('<\/div>');

//]]>

</script>

  <b:include name='quickedit'/>

  </div>

</b:includable>

<b:includable id='flat' var='data'>

  <ul>

    <b:loop values='data:data' var='i'>

      <li class='archivedate'>

        <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)

      </li>

    </b:loop>

  </ul>

</b:includable>

<b:includable id='menu' var='data'>

  <select expr:id='data:widget.instanceId + "_ArchiveMenu"'>

    <option value=''><data:title/></option>

    <b:loop values='data:data' var='i'>

      <option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>

    </b:loop>

  </select>

</b:includable>

<b:includable id='interval' var='intervalData'>

  <b:loop values='data:intervalData' var='i'>

      <ul>

        <li expr:class='"archivedate " + data:i.expclass'>

          <b:include data='i' name='toggle'/>

          <a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>

            <span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>

          <b:if cond='data:i.data'>

            <b:include data='i.data' name='interval'/>

          </b:if>

          <b:if cond='data:i.posts'>

            <b:include data='i.posts' name='posts'/>

          </b:if>

        </li>

      </ul>

  </b:loop>

</b:includable>

<b:includable id='toggle' var='interval'>

  <b:if cond='data:interval.toggleId'>

  <b:if cond='data:interval.expclass == "expanded"'>

    <a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" +       "&dir=close&toggle=" + data:interval.toggleId +       "&toggleopen=" + data:toggleopen'>

        <span class='zippy toggle-open'>▼ </span>

    </a>

  <b:else/>

    <a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" +         "&dir=open&toggle=" + data:interval.toggleId +         "&toggleopen=" + data:toggleopen'>

          <span class='zippy'>

            <b:if cond='data:blog.languageDirection == "rtl"'>

              ◄

            <b:else/>

              ►

            </b:if>

          </span>

    </a>

  </b:if>

 </b:if>

</b:includable>

<b:includable id='posts' var='posts'>

  <ul class='posts'>

    <b:loop values='data:posts' var='i'>

      <li><a expr:href='data:i.url'><data:i.title/></a></li>

    </b:loop>

  </ul>

</b:includable>

</b:widget>

Luego guardamos plantilla, accedemos a nuestro blog y miramos en la sección ARCHIVOS DEL BLOG, donde veremos los cambios.