Bloques animados en el elemento Archivos

Hace unos días, Armando preguntaba si era posible utilizar la técnica de los bloques animados en el elemento Archivos de Blogger.

Como se refiere a un script descripto en esa entrada, pasaré por alto algunos detalles que pueden verse allí y vamos a ir directamente al grano ya que implementar esto es sencillo y debería funcionar en cualquier plantilla y con cualquier tipo de opción que hayamos seleccionado: Jerarquía, Lista o Menú desplegable.

<script type="text/javascript" src="URL_animatedcollapse.js"></script>

Ahora, vamos a expandir los artilugios de la plantilla y vamos a buscar este código que es donde comienza el elemento archivos:

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

Donde el atributo title podrá ser diferente si es que lo hemos modificado.

Un poco más abajo, siempre dentro de ese elemento buscaremos esto e insertaremos las líneas marcadas en color:

<b:includable id='main'>

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

<div class='widget-content'>

<div style=''>
<a href='javascript:losArchivos.slideit()'>EXPANDIR/CONTRAER</a>
</div>

<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY"'>
<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>

<script type='text/javascript'>
var losArchivos=new animatedcollapse(&quot;ArchiveList&quot;, 500, false)
</script>

<b:include name='quickedit'/>

</div>

</b:includable>

En el ejemplo, la forma de expandir y contraer es sólo un enlace de texto pero también podría ser una imagen y cualquier personalziación de estilo podemos hacerla dentro del atributo style del DIV.

Ese enlace debe estar arriba del bloque a ocultar que ene este caso, será ArchiveList.

Más abajo, luego de ese bloque, colocaremos la llamada al script en si mismo en la que podemos establecer tres parámetros:

var losArchivos=new animatedcollapse("ArchiveList", 500, false)

El primero es el nombre del bloque que en este caso no cambiaremos; el segundo es un valor que indica la duración del efecto y es un valor expresado en milisegundos (1000 = 1 segundo). El tercero es el estado inicial del bloque que puede ser true (inicialmente expandido) o false (inicialmente contraido).