Tutorial: Ocultar la NavBar de blogger (efectos)

Foto tomada: Deliriología

Good morning, travelers!

He amanecido bilingüe el día de hoy, así que toda esta entrada será en inglés... Nah, no es cierto, solamente he amanecido de muy buen ánimo. Espero que este nuevo mes los esté tratando de maravilla. Por mi parte debo decir que ya regreso a la uni, y antes de desaparecer entre lecturas, teorías, referentes y arte, he decidido traer este tutorial y aprovechar a dejar programados otros cuantos posts.

Les explico brevemente, la barra de navegación (también conocida como NavBar) no es aconsejable quitarla. En una entrada posterior ya les contaré la razón, por hoy les enseñaré cómo ocultarla sin quitarla, sino añadiendo dos efectos muy chulos. Espero que este tuto les sea útil y les guste.

Nivel: Fácil

Paso 1: Lo primero que deben hacer es ir a la Plantilla → Editar HTML. En el buscador ingresan ]]></b:skin> (para quienes no lo sepan, el buscador se saca presionando Ctrl+F). Una vez localizado, pegarán el código del efecto que más les guste antes del ]]></b:skin>.

NavBar que se desliza hacia abajo al pasar el cursor

#navbar-iframe {
position:absolute;
top:-30px;
height:60px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#navbar-iframe:hover {
top:0;
height:30px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}

NavBar que desaparece al quitar el cursor

#navbar-iframe {
opacity:.0;
filter:alpha(Opacity=0,FinishedOpacity=0);
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#navbar-iframe:hover {
opacity:1.0;
filter:alpha(Opacity=100,FinishedOpacity=100);
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}

Nota: A aquellos blogs que cuenten con un menú superior no puedo garantizar que los efectos les funcionen correctamente. A los blogs que tengan reproductor SCM puedo asegurar que los efectos les funcionan correctamente.

No está demás informarles que estos efectos se ven bien y funcionan correctamente en navegadores como Chrome y Mozilla, en Explorer se tarda mucho.
¿Y a ustedes qué les ha parecido este tutorial? ¿Les gustaría implementarlo?
¡Déjenme un comentario!
Adoro leerlos.

Este tutorial fue tomado, al igual que las imágenes de muestra, de: CiudadBlogger