Crear una barra de herramientas para el footer (3)

Terminemos con la barra en el footer y empecemos a agregar el contenido de los elementos ocultos. Teníamos tres cosas que mostrar usando los botones Feedburner, Twitter y Facebook.

Como dije, puede ser cualquier cosa y, en estos ejemplos, copié el formulario de suscripciones en uno, coloqué el script para conectarse con Twitter en otro y puse una imagen en el tercero.

En todos los casos, lo hice exactamente igual que lo haría si tuviera que agregarlos en la sidebar o en cualquier otra parte del blog.

Terminado eso, volvemos a la edición HTML de la plantilla y agregamos unas definiciones CSS que dimensionarán esos elementos y los ocultarán:

/* el contenedor Twitter */
#HTML7 {display: none; width: 400px;}
/* el contenedor Feedburner */
#HTML8 {display: none; width: 240px;}
/* el contenedor Facebook */
#HTML9 {display: none; width: 260px;}

Como el estilo por defecto será "ocultos", si fuéramos a la solapa Elementos de la página no los veríamos así que no podríamos editarlos; para que esto no ocurra, es decir, para que esten ocultos en el blog pero visibles en esa ventana de edición, agregamos esto, también en la parte de estilo:

body#layout #footer-tools #HTML7 {display: block;}
body#layout #footer-tools #HTML8 {display: block;}
body#layout #footer-tools #HTML9 {display: block;}

Ahora, haciendo click en cada ícono, se mostrará ese contenido y volviendo a hacer click, se ocultará tal como podemos verlo en este DEMO online.

El script que pusimos al inicio es el que controla eso y consigue que sólo se muestre uno por vez, permutando la propiedad display.

No es necesario que todos los elementos se oculten y sean mostrados mediante íconos, también podríamos agregar accesos a gadgets que se ejecutaran directamente en la barra. Agreguemos dos más: un buscador y un ícono para abrir un formulario de contacto.

El primero, será un elemento Cuadro de búsqueda (id = CustomSearch1) y el segundo, otro elemento HTML (id = HTML2) que dependerá del formulario que usemos.

Luego, otra vez en la plantilla seguimos agregando CSS para esos elementos:

#CustomSearch1 {
  background: transparent url(URL_imagen) no-repeat left top;
  height: 35px !important;
  padding: 15px 0 0 60px;
  width: 180px;
}

/* y algún efecto extra sobre los íconos */
#contacto, #feedburner, #twitter, #facebook {opacity: .8; filter: alpha(opacity=80); }
#contacto:hover, #feedburner:hover, #twitter:hover, #facebook:hover {opacity: 1; filter: alpha(opacity=100);}

Otra vez, si es necesario, volvemos a cambiar el ancho de #footertools-barra-inner (ahora requiere 590 pixeles) ... veremos esto.

Y así podríamos seguir hasta el infinito, agregando cosas y haciendo que se muestren en la barra de manera directa o bien colocando enlaces para que se abran en ese DIV superior que permanece oculto hasta que lo necesitamos.

El proceso será siempre el mismo. Si se trata de íconos que abren ventanas modales:

• agregamos un elemento HTML en la barra inferior
• agregamos un elemento cualquiera en la barra superior y le ponemos el contenido
• tomamos nota del ID que se muestra en Edición HTML
• colocamos las propiedades necesarias (fundamentalemente su ancho)
• volvemos a editar el ícono y usamos el ID del elemento oculto para agregar la imagen y el enlace que ejectua el script

Si se trata de elementos que no requieren desplegarse:

• agregamos ese elemento en la barra inferior
• colocamos las propiedades necesarias en Edición HTML

El resultado final es el de este DEMO donde los contenidos son sólo simulaciones o bien copias de distintos gadgets de este mismo blog.

REFERENCIAS:Parte 1 Parte 2