Expandir / Contraer Archivo de Blogger con JQuery: Efecto deslizante

Esta es una adaptación del artículo Expand-collapse toggle panel (div) [...] que hice para Blogger, permitiendo contraer y expandir los elementos dentro del Archivo del Blog, que cuando crece mucho un sitio, es un artilugio con un diseño visualmente molesto.

Así que podemos de muchas formas hacer que se contraiga, el método que uso en CGnauta es un script simple de ocultar/mostrar, pero este otro método con JQuery es rápido y simple y compatible con el Slider de JQuery que adapté a blogger.

El resultado hará que el item de Archivo de blog esté oculto hasta que alguien de un clic, ver aquí como quedará finalmente.

Modo on

Modo off

*Antes que nada respalde su plantilla.

Modificando Archivo: 
Vamos a la plantilla en Diseño - Edición de HTML, marcamos Expandir plantilla de artilugios y buscamos la sección:

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

El archivo tienen diferentes etiquetas <b:includable> ... </b:includable>, pero nosotros únicamente tenemos que buscar la que dice <b:includable id='main'> que es la que imprime resultado, generalmente está al principio, pero si introdujeron condicionales será enviada hasta el final, esta contiene el siguiente contenido:

<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 + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>    
<b:include data='data' name='menu'/>
</b:if>
</div>
 </div>
<b:include name='quickedit'/>
</div>
</b:includable>

Vamos a reemplazar el contenido marcado en azul entre <b:includable id='main'> y </b:includable> por el siguiente código:

<div class='msg_list'>
  <b:if cond='data:title'>
    <h2 class='msg_head'>&#9660;/&#9650; <data:title/></h2>
  </b:if>
<div class='msg_body'>
  <div class='widget-content'>
  <div id='ArchiveList'>
  <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
    <b:if cond='data:style == &quot;HIERARCHY&quot;'>
     <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == &quot;FLAT&quot;'>
      <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == &quot;MENU&quot;'>
      <b:include data='data' name='menu'/>
    </b:if>
  </div>
  </div>
</div>
<b:include name='quickedit'/>
  </div>
</div>

Guardamos la plantilla y desmarcamos Expandir plantilla de artilugios.

En la parte de CSS de nuestra plantilla pegamos las siguientes reglas CSS:

/* expandir contraer archivo por matius */
.msg_list {
margin: 0px auto;
padding: 0px;
width: 100%;

}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
/*background:#fff;*/ / *Quite las marcas de comentario CSS, si quiere poner un fondo de color*/
margin:0px;
}
.msg_body {
padding: 5px 10px 135px; /* El último valor es para el espacio de la imagen*/
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUv1bCDeFDelnQYVBuljwPjcdB3w0QEhhK9vCBuhytN1dUIYsytntCPKnL6_D-rGOc1ZZQdDODFM7zDOFKmO6pj72WNSXk1oGUcgVJThB44pZEDtEsIqVsIBwO763XDU8LHPuLpw/) center bottom no-repeat; /* La imagen puede quitarla y poner un fondo de color */
}
/*fin expandir contraer archivo */

Instalando JQuery
Podemos usar cualquier otra versión, aunque la versión 1.3.1 funciona perfectamente con el Slider de mi anterior tutorial.

Para instalar JQuery, buscamos la etiqueta </head> y justo después pegamos:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
$(document).ready(function()
{
  //hide the all of the element with class msg_body
  $(".msg_body").hide();
  //toggle the componenet with class msg_body
  $(".msg_head").click(function()
  {
    $(this).next(".msg_body").slideToggle(600);
  });
});
</script>

Guardamos la plantilla.

Y ahora deberán ver que el archivo se contrae: