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

12 comentarios:

Antony  

Ahora esta mucho más claro... :) Saludos! Gracias por compartir las imágenes.

Responder
José GDF  

Me anoto estas dos entradas para cuando me haga una plantilla nueva. Más las que queden, claro... :)

Por cierto, el enlace a la parte 1 está roto.

¡Un saludo!

Responder
Josep  

¿Donde hay que colocar el código del IcoTools?¿Antes o después del script?

Porque no me funciona la función... :-(

Gracias.

Responder
JMiur  

Antony: Me alegro que sirviera.

José GDF: Listo. Enlaces arreglados. Gracias por el aviso.

Josep: El enlace que aqui llamo IcoTools va en el elemento HTML agregado. El script que lo controla va junto con el resto de los scripts, en cualquier parte antes de </head>

Responder
Gem@  

Esta barra de herramientas tiene mucha utilidad pero lo que me ha llamado la atención es la entrada en sí. Tiene mucho trabajo ;)

Responder
Marcos Gabriel  

Bom como eu disse..
este aqui é o site que eu disse , que serve para criar toolbars!
http://www.conduit.com/

Responder
PedroX  

Hola, JMiur..

Tengo un Problema, resulta que estoy cambiando la forma de plantilla.. y coloque 1 sidebar grande arriba (la llamada widebar) y dos pequeñas abajo.

Entonces, en la pagina principal se ve perfectamente.. pero al hacer click en un post que sea corto, osea que no alcanze hasta donde se encuentran las sidebars pequeñas, éstas se colocan debajo del MAIN!!

Les coloque el FLOAT:RIGHT; pero nada!

El blog es este: http://pedrox-pruebas.blogspot.com/

Espero puedas ayudarme. Gracias.

Responder
JMiur  

Pués sí, Gem@, la verdad, me llevó mucho trabajo explciarlo, mucho más que ahcer la barra :)

Gracias, Marco, le daré un vistazo.

PedroX: eso es lo que ocurrirá porque flotar no es alinear. Para evitar eso, es necesario ue ambas sidbars estén dentro de un div que se ael que flote. Mira en estas dos entradas: acá y acá.

Responder
PedroX  

Muchas Gracias JMiur, ya esta solucionado..!! (No tuve que leer mucho los posts para entender lo que me decias xD) jajajaja..

Un Saludo! xD

Responder
JMiur  

Me alegro que se solucionara, PedroX :)

Responder
Deybi  

Es un poco trabajoso, pero los frutos valen la pena probarlos.

Responder
JMiur  

Es engorroso porque hay que ir y volver constantemente pero, una vez armado, termina siendo sencillo de manejar.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR