2.06.2016

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 PlantillaEditar 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

4 comentarios:

  1. Hola, muy interesante tuto, lo pondrá en practica
    besos

    ResponderEliminar
  2. Hola!
    La verdad a mi me fastidia bastante el navbar, considera que le quita el atractivo a nuestra plantilla, por eso lo tengo oculto.
    Pero esperaré tu post donde expliques porque no es recomendable quitarla para decidir que efecto agregarle.
    Muchas gracias por el tutorial.
    Besos

    ResponderEliminar
  3. Hola, muy buen tip, no me lo sabía... de hecho, creo que no sé si mi blog lo tiene porque estoy casi segura que no tiene la navbar jejeje.... Saludos:D

    ResponderEliminar
  4. Muy buen tutorial a mi en lo personal no me gusta así que la quite de plano jaja pero me gusta el efecto que de ocultarse

    ResponderEliminar

¡Hola, viajero!
Queremos darte las gracias por tomarte el tiempo de leer nuestras entradas y comentar, tu opinión es muy importante para las cuatro.
No olvides tener en cuenta lo siguiente:
♥No se aceptan comentarios spam. Todo el que lleve un enlace será borrado.
♥Por favor comenta sobre la entrada, si deseas hablarnos de tu blog, pedir afiliación, o algo por el estilo; desde la pestaña "Contacto" puedes enviarnos un correo.
♥Si perteneces a una iniciativa a la cual también pertenecemos, sé paciente, trabajamos en ordenar nuestro tiempo. Disculpa las molestias.