¿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.
Una vez instalada se agrega un ícono en la barra de estado desde donde podemos mostrar y ocultar una barra lateral que nos permite ver y gestionar listas de videos que simplemente arrastramos desde diferentes servicios como 
