Bloggeratto: Hovering Peek-A-Boo Blogger Navbar

Este es uno de los Hacks mas obvios que se pueden ver(y no ver) en el blog que estoy seguro que no has visto en ningun otro lado. Para verlo en accion solo deja flotar el cursor cerca del tope de pagina en el blog y podras verlo actuar.

Este hack nacio de una idea debido a una discusion en particular en el Blog de Implobulus, Consuming Experience que me hizo volver a pensar en cuanto a mi posicion acerca de la barra navegadora de blogger. Pero mas importante aun, eso me hizo pensar en como responderle a ella con algo que tuviera la etica intacta de la barra navegadora y que fuera funcional y acorde a lo que un blog de blogger debe tener y mostrar sin traicionar mi posicion original al respecto.

Y asi lo hice:

Ya despues, le pedi ayuda a Aditya por Gmail Chat para ver si podia encodearme algo basado en el concepto que habia pensado:

"Escondamos la barra navegadora de blogger, pero dejemos la decision de mostrarla y usarla al visitante/usuario, dejando la funcionalidad de la barra navegadora completamente intacta".

Asi que despues de tan solo 5 minutos, Aditya encodeo algo en CSS que resolvia el problema. Desgracidamente no era multinavegador todavia (solo Firefo podia mostrarla de la manera correcta). asi que volvio a encodear, y yo volvi a probar el codigo hasta 30 minutos despues que algo de javascript tuvo que ser agregado y voila!
El hack de la "Hovering Peek-A-Boo Blogger Navbar" habia nacido.

Este hack como se dicho, es multinavegador. pero una vez que la version final de IE7 haya salido, actualizare este post para poner la version 100% css. Mientras tanto esta version hara el trabajo.

Chequenla:

1. Vayan a su Editor de Templete/platilla (Escritorio > opciones > plantilla)

2. Pongan este CSS dentro de las etiquetas de codigo::

.show{filter:alpha(opacity=100);opacity:1.0}
.hide{filter:alpha(opacity=0);opacity:0.0}

3. Despues pongan este script de codigo JS (No olviden las etiquetas) dentro de las etiquetas:

function sh(){
var e=document.getElementById ("b-navbar");
e.className="show";
}

function hi(){
var e=document.getElementById("b-navbar");
e.className="hide";
}

function att(){
var e=document.getElementById ("b-navbar");
e.className="hide";
if(navigator.appName=="Microsoft Internet Explorer"){
e.attachEvent("onmouseover", sh);
e.attachEvent("onmouseout", hi);
}
else{
e.addEventListener("mouseover", sh, false);
e.addEventListener("mouseout", hi, false);
}
}

4. Finalmente cambien su etiqueta por esta otra:

5. ¡Eso es!. Ahora tienes una barra navegadora que solamente se muestra cuando es necesitada , cumples con la extricta blogetiquette (mas sobre eso despues) y cumples con tu contrato de Blogger.

Si crees que este post debe ser mas detallado deja un mensaje.

Creditos:
Codigo y Implementacion: Aditya
Idea: Avatar

Posted By Avatar X At 4:46 PM