Una forma de contraer y expandir los Archivos

¿Existe alguna manera para que el elemento "Archivos" se vea como lo tienes tú? es una pregunta que me hicieron por lo menos tres veces en una semana y que espero poder contestar.

En realidad, no es nada del otro mundo, solamente una variante de Expandir/Contraer pero aplicado a uno de esos elementos que Blogger maneja por su cuenta y sobre el cual no es mucho lo que podemos hacer así que debemos hacer trampa.

La idea es usar dos elementos diferentes, en uno (HTML) pondremos los códigos que controlan al otro (Archivos). Empecemos por el final, si no lo tenemos, agregamos el elemento Archivos y lo ubicamos en la sidebar donde deseemos con las opciones que nos gusten.

Ahora agregamos un elemento HTML al que también le damos un título y algún contenido (una palabra, lo que sea) para que nos permita guardarlo. Lo ubicamos entonces, encima del anterior.

Si miramos el blog ... no veremos mucho.

Vamos entonces a la Edición HTML de la plantilla y si no expandimos los artilugios, nos mostrará este código:

<b:widget id='HTMLX' locked='false' title='ARCHIVOS ON/OFF' type='HTML'/>
<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>

donde HTMLX variará según la cantidad de elementos que tengamos agregados. Ahora, expandimos los artilugios para ver el código completo y vamos a buscar el elemento HTML (para eso le pusimos un título). Nos mostrará esto y allí, sin que nos tiemble la mano, eliminaremos todo lo que está en rojo:

<b:widget id='HTMLX' locked='false' title='ARCHIVOS ON/OFF' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>

Si ahora usáramos la Vista Previa no lo veríamos ya que le hemos quitado el código que mostraba el título y el contenido.

Como la idea es simular el mismo estilo de los títulos del resto de la sidebar y agregarle un pequeño ícono para desplegar y contraer el elemento Archivos, vamos a poner directamente el código allí y para eso, necesitaríamos saber cuáles son las propiedades CSS, cosa que en general, está definida como:

.sidebar h2 { ....... }

Para no complicarme la vida alineando yo usé una tabla pero, podemos hacerlo de cualquier otra forma:

<table id="tablaArchivos" cellspacing="0" cellpadding="0">
<tr>
   <td valign="middle">ARCHIVOS</td>
   <td align="center" valign="middle" >
      <a href="javascript:void(0);" onclick="masmenosArchivos();" title="Expandir/Contraer archivos">
        <img id='manejaArchivos' src='URL_imagenContraido' />
      </a>
   </td>
</tr>
</table>

La tabla tiene un ID (tablaArchivos) que es el que luego usaremos para darle las propiedades CSS. En la primera celda (TD) está el título y en la segunda, un enlace que también tiene un ID (manejaArchivos) que es el que ejecutará el script para expandir y contraer el elemento Archivos.

Para probar que vamos bien, agregaremos los estilos CSS antes de </b:skin>. En este caso:

#tablaArchivos { /* son las mismas de .sidebar h2 */
  background: #0F181F url(URL_imagenFondo) no-repeat 0 50%;
  border; none;
  color: #FF9933;
  [ ... font-family ... font-size ... font-weight ... margin ... padding ... a gusto ... ]
  height: 28px;
  width: 100%;
}

a#manejaArchivos, a#manejaArchivos:link,
a#manejaArchivos:visited, a#manejaArchivos:active,
a#manejaArchivos:hover {
  display: block;
  [ ... height ... width ... dependen del tamaño de la imagen a usar ... ]
  margin: 0;
  padding: 0;
}

#BlogArchive1 {
  display: none;
  padding: 0;
}

Y necesitamos el script así que antes de </head> colocamos:

<script type='text/javascript'>
// <![CDATA[
  var archivosIMG = new Array();
  archivosIMG[0] = "URL_imagenContraido";
  archivosIMG[1] = "URL_imagenCerrar";
  function masmenosArchivos() {
    if(document.getElementById('BlogArchive1').style.display== "block") {
      document.getElementById('manejaArchivos').src=archivosIMG[0];
      document.getElementById('BlogArchive1').style.display="none";
    } else {
      document.getElementById('manejaArchivos').src=archivosIMG[1];
      document.getElementById('BlogArchive1').style.display="block";
    }
  }
// ]]>
</script>

Lo que hará ese script es verificar el estado del elemento Archivos; si está oculto, lo mostrará y viceversa. Al mismo tiempo, cambiará la imagen de fondo que usamos en el enlace.

Si guardamos y probamos (con Vista Previa no podremos porque los scripts se deshabilitan), todo debería funcionar aunque nos quedaría por resolver un detalle: eliminar el título del elemento Archivos.

Cuando agregamos ese elemento en la plantilla el código siempre es el mismo sin importar las opciones que elijamos. Es uno de los más engorrosos de entender y uno de los más largos pero esto no es problema porque no es necesario hacerle modificaciones sofisticadas:

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  .......

Otra vez, eliminamos lo que está en rojo que es el código que muestra el título.

Eventualmente, si quisiéramos, podríamos agregar un ícono similar en este elemento, de tal manera de poder cerrarlo desde ahí (algo útil si la lista es larga). Para eso, buscamos lo siguiente:

<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <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>

<table border='0' cellpadding='0' cellspacing='0' id='tablaCerrarArchivos'>
   <tr>
      <td align='center' valign='middle'>CONTRAER ARCHIVOS</td>
      <td align='center' valign='middle'>
         <a href='javascript:void(0);' onclick='masmenosArchivos();'>
            <img align='right' src='URL_imagenCerrar' />
         </a>
      </td>
   </tr>
   </table>

  <b:include name='quickedit'/>
  </div>
</b:includable>

Allí agregamos lo marcado en color, un código similar al que usamos antes y y usamos el ID (tablaCerrarArchivos) para darle el diseño gráfico que nos guste.