Crear una barra de herramientas para el footer (1)

Wibiya es una aplicación que nos permite incluir una barra con funciones varias dentro de un sitio web: Facebook, Twitter, feeds, las últimas entrada, buscadores, etc. El problema es que si uno quiere probarla deberá solicitar una invitación porque aún no está disponible al público

Pero, en realidad, nada impide que uno pueda crearse una propia, a gusto y piachere, con las cosas que quisiera usar y con el diseño que se nos ocurra. De alguna manera, es una solución alternativa al dilema de ¿que hacer con el footer de una página?

Así que la idea es diseñar una barra que se mantenga estática en la parte inferior de la página en donde podamos agregar pequeñas aplicaciones o íconos que las abran en alguna ventana de tipo modal sin utilizar otra cosa que los elementos de Blogger; es decir, sin librerías externas ni scripts complejos para que sea liviano, flexible y compatible con cualquier plantilla.

¿De qué hablo? De conseguir algo como esto:

Cuyo demo puede verse funcionando online siguiendo este enlace y cuyo aspecto estético o diseño gráfico, dependerá pura y exclusivamente de la imaginación. Este es particularmene "grande" sólo para que se "vea bien"

Para empezar, todo lo que necesitamos es crear dos DIVs con sus respectivas secciones para que luego, podamos agregarle elementos o gadgets tal como hacemos normalmente desde el panel de diseño.

Serán dos porque uno (el inferior) será la barra siempre visible y fija en la pantalla y el otro permanecerá oculto y es donde se mostrarán las ventanas si es que necesitamos mostrar alguna. Este entonces, no será otra cosa que una ventana modal que controlaremos con unas pocas líneas de JavaScript ¿Confuso? Cerrar los ojos, decir sí y manos a la obra ...

En Diseño | Edición HTML, sin expandir los artilugios para no confundirnos, buscamos el último </div> que haya en la plantilla y justo debajo, agregamos las dos nuevas secciones:

<div id='footertools-contenedor'>
<b:section id='tool-container' />
</div>

<div class='footertools-barra-max' id='footertools-barra'>
<b:section id='footertools-barra-inner' />
</div>

Y ahora, crearemos el estilo CSS antes de </head> donde, en los sucesivos pasos, iremos agregando las propiedades de los elementos que usemos:

<style type='text/css'>

/* FOOTER TOOLS : Todas las definiciones de estilo van acá */

/* este es el DIV inferior con la barra visible */
#footertools-barra {
  background: transparent url(URL_unaimagen) repeat-x left top; /* un fondo de color o una imagen optativa */
  bottom: 0; /* esto lo fuerza a ubicarse en la parte inferior de la pantalla */
  right: 0; /* y que se extienda de lado a lado */
  height: 50px; /* es la altura que puede ser cualquiera y depende de los íconos a usar */
  margin: 0 auto; /* su contenido se centrará */
  padding: 0; /* eliminamos cualquier relleno para que la altura sea exacta */
  position: fixed; /* lo fijamos para que no se mueva y permanezca siempre visible */
}
/* el ancho lo pondremos por separado, en una clase para poder minimizar esa barra */
.footertools-barra-max { /* desplegada, ocupará todo el ancho de la pantalla */
  width: 100%;
}
.footertools-barra-min { /* contraida ocupará sólo el ancho de un ícono  */
  -moz-border-radius-bottomleft: 5px;
  -moz-border-radius-topleft: 5px;
  width: 60px;
}

/* este es el DIV interior de esa barra */
#footertools-barra-inner {
  height: 50px; /* tendrá el mismo alto */
  margin: 0 auto; /* su contenido estará centrado */
  width: 920px; /* y le daremos un ancho que dependerá de la cantidad de cosas que pongamos */
}

/* estas son las propiedades generales de los gadgets que agregaremos luego */
#footertools-barra .widget { /* cada elemento agregado */
  float: left; /* se verán uno lado del otro */
  height: 50px; /* la altura es siempre la misma */
  margin: 0 5px; /* los separamos un poco uno del otro */
}
#footertools-barra h2 { /* y ocultaremos los títulos */
  display:none; 
}

/* este es el DIV superior con el contenido oculto */
#footertools-contenedor {
  bottom: 55px; /* se mostrarán arriba de la barra, separado un poco de esta */
  right: 0;
  margin: 0 auto; /* tambien lo centramos */
  position: fixed; /* y lo fijamos en la pantalla */
  text-align: left;
  width: 100%; /* y le damos todo el ancho disponible */
}

/* estas son las propiedades generales de los gadgets que agregaremos luego */
#footertools-contenedor .widget {
  -moz-border-radius: 10px;
  background-color: #E4E4E4;
  border: 2px solid #000000;
  margin: 0 auto; /* siempre se mostrarán centrados en la pantalla */
  padding: 10px;
}
#footertools-contenedor h2 { /* y los títulos de esos widgets ocultos */
  border-bottom: 1px dotted #999;
  color: #BB0000;
  font-family: Tahoma;
  font-size: 17px;
  font-weight: normal;
  letter-spacing: -.01em;
  line-height: 24px;
  margin: 0;
  text-align: right;
}

</style>

El resultado no será nada del otro mundo, sólo una barra fija en la parte inferior de la ventana como se ve en este DEMO.

Un detalle a tener en cuenta es que, como queremos que esas dos secciones sean accesibles en el modo Diseño tal como lo son la sidebar o el footer estandard, mejor le agregamos dos definiciones más para evitarnos problemas:

body#layout #footertools-barra {position: static;}
body#layout #footertools-contenedor {position: static;}

Eso, sólo hará que en esa ventana interna de Diseño, se nos muestren las secciones de manera "normal" y, pongamos lo que pongamos, no tendrá ninguna influencia con la forma en que vemos el blog. Nos movemos entonces a esa paestaña para agregar elementos. Veremos algo así:

Ahora, es tiempo de agregar esos elementos pero para eso, hay que esperar hasta mañana porque esto se ha hecho demasiado largo