Crear una barra de herramientas para el footer (2)

Sigamos con la barra en el footer y empecemos a agregar los elementos.

Empezaremos poniendo cuatro elementos HTML abajo y tres arriba. A cada uno le daremos un título para poderlos identificar luego en el código y cualquier contenido porque lo primero que necesitamos es crearlos, debemos saber el ID que les colocará Blogger y no nos dejará crearlos vacios; luego, tendremos que editarlos para colocarles el contenido real.

En el ejemplo, los de abajo tendrán estos títulos: Feedburner, Twitter, Facebook e IcoTools; los de arriba serán Contenedor Facebook, ContenedorTwitter y Contenedor Feedburner. Deberíamos entonces, ver algo así:

Si volvemos a la edición HTML, sin expandir los artilugios, veremos algo así:

<div id='footertools-contenedor'>
<b:section id='tool-container'>
<b:widget id='HTML9' locked='false' title='Contenedor Facebook' type='HTML'/>
<b:widget id='HTML7' locked='false' title='ContenedorTwitter' type='HTML'/>
<b:widget id='HTML8' locked='false' title='Contenedor Feedburner' type='HTML'/>
</b:section>
</div>

<div class='footertools-barra-max' id='footertools-barra'>
<b:section id='footertools-barra-inner'>
<b:widget id='HTML5' locked='false' title='Feedburner' type='HTML'/>
<b:widget id='HTML3' locked='false' title='Twitter' type='HTML'/>
<b:widget id='HTML4' locked='false' title='Facebook' type='HTML'/>
<b:widget id='HTML10' locked='false' title='IcoTools' type='HTML'/>
</b:section>
</div>

¿Para qué nos sirve? Para saber los IDs de esos elementos que estarán ocultos y poderlos desplegar y contraer. Ahora, sabemos que:

• Contenedor Facebook tendrá el ID HTML9
• ContenedorTwitter el ID HTML7
• Contenedor Feedburner el ID HTML8

Agregaremos un script para luego, poder controlar esos elementos. Lo ponemos antes de </head>:

<script type='text/javascript'>
//<![CDATA[
  var toolOpen = "";
  function ftool(cual) {
    var cualmostrar = document.getElementById(cual);
    if (cualmostrar.style.display == 'block') {
      cualmostrar.style.display='none';
      toolOpen = "";
    } else {
      if (toolOpen != "") { document.getElementById(toolOpen).style.display='none'; }
      cualmostrar.style.display='block';
      toolOpen = cual;
    }
  }
  function togglebarra() {
    var labarradiv = document.getElementById('footertools-barra');
    var labarraimg = document.getElementById('icotoggle');
    if(labarradiv.className == "footertools-barra-max") {
      labarradiv.className = "footertools-barra-min"
      labarraimg.src="URL_imagen_MIN";
    } else {
      labarradiv.className = "footertools-barra-max"
      labarraimg.src="URL_imagen_MAX";
    }
  }
//]]>
</script>

Y ya que estamos, como sabemos que el elemento al que le dimos por título IcoTools tendrá el ID HTML10, agregamos unas propiedades CSS especiales ya que ese será el botón con que expandiremos y contraeremos la barra:

/* este elemento de control lo pondremos a la derecha de la barra */
#HTML10 {
  position: absolute;
  right: 0;
}

Guardamos y no veremos nada nuevo porque no tenemos contenido. Vamos entonces a editar los elementos de la barra y agregarles ese contenido, en este caso, sólo un enlace con una imagen.

En el elemento llamado Feedbuner pondremos esto:

<a id="feedburner" href="javascript:ftool('HTML8')"><img src="URL_imagen_Feedburner" /></a>

En el elemento llamado Twitter pondremos esto:

<a id="twitter" href="javascript:ftool('HTML7')"><img src="URL_imagen_Twitter" /></a>

En el elemento llamado Facebook pondremos esto:

<a id="facebook" href="javascript:ftool('HTML9')"><img src="URL_imagen_Facebook" /></a>

En el elemento llamado IcoTools pondremos esto:

<a href="javascript:togglebarra()"><img id="icotoggle" src="URL_imagen_Icono" /></a>

Cualquier otro que agreguemos y que sirva para abrir "otra ventana", tendrá la misma estructura:

<a id="unnombre" href="javascript:ftool('ID_elemento_oculto')"><img src="URL_imagen" /></a>

El resultado, hasta acá, será el que puede verse en este DEMO

NOTA: Como sólo hemos agregado tres cosas, el ancho que está indicado en #footertools-barra-inner es excesivo, así que si queremos verlo centrado, modificamos el valor de width y ponemos 180px.

Haciendo click en el ícono que está más la la derecha, la barra se minimizará y se expandirá pero siempre permanecerá visible y fija.

Haciendo click sobre los íconos, no pasará nada porque no tienen contenido ¿Qué podemos agregar? Cualquier cosa, exactamente igual a lo que hacemos en el resto del blog.

Paciencia, ya casi terminamos ...

REFERENCIAS:Parte 1