La barra de navegación (navbar)


Si bien es una barra que posee varias utilidades, la mayoría decide eliminarla por motivos estéticos y de otra naturaleza. Bien hoy vamos a ver qué podemos hacer con esta barra. Os ofrezco tres alternativas: ocultarla, eliminarla o personalizarla.



OCULTAR LA NAVBAR

Tenemos dos formas de ocultarlo:

1. Con el siguiente código no eliminaremos la navbar sólo la ocultaremos, es decir, no la veremos pero estará ahí. Un poco díficil de explicar con palabras pero cuando apliqueis el código verán a lo que me refiero. Para oculta la navbar hacemos lo siguiente :

♠ Vamos a Diseño/ Edición de HTML y Expandir plantillas de artilugios.
♠ Antes de body { pegamos el siguiente código:

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}


2. La segunda forma de ocultar la navbar la ocultará parcialmente, es decir, la barra de navegación sólo será visible si pasamos el cursor sobre ella. Para ello, hacemos lo siguiente:

♠ Vamos a Diseño/ Edición de HTML y Expandir plantillas de artilugios.
♠ Antes de body { pegamos el siguiente código:

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;
filter:alpha(Opacity=100,FinishedOpacity=100)}


ELIMINAR LA NAVBAR

Con el siguiente código, la navbar ya no estará en tu blog. Para elo seguimos los siguientes pasos:

♠ Vamos a Diseño/ Edición de HTML y Expandir plantillas de artilugios.
♠ Antes de <head> pegamos el siguiente código:

<style type="text/css">
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
</style>


PERSONALIZAR CON OTRA NAVBAR

Amtes que nada, debes de haber ocultado o eliminado la navbar de Blogger.Después puedes agregar otra navbar sencilla creado por ti mismo o crear una barra con menús desplegables .

Para el primer caso, que aplicó El Escaparate, podríamos hacer una sencilla barra con color y con algún texto, de bienvenida, por ejemplo. Para ello:

♠ Vamos a Diseño/ Edición de HTML y Expandir plantillas de artilugios.
♠ Después de <head> pegamos el siguiente código:

<div style=' background-color:#ffff60;
border-bottom: 1px solid #c00040;
margin: 0 0 5px 0;
padding: 4px 0;
font-size: 14px;'>
<img alt='BARRA' src='URL-de-la-imagen'
style='vertical-align: text-bottom;'/>
TEXTO-TEXTO-TEXTO
</div>


Para el segundo caso podríamos hacer una navbar con menús desplegables. Parece complicado pero no es así. Lo único que tenemos que hacer es crear una cuenta en NetworkBar Generator. Una vez creda la cuenta podremos diseñar la navbar, con colores , fuentes y añadiendo enlaces para el desplegable.
Una vez que tenga,os el código, para agregarlo a nuestro blog. hacemos lo siguiente:

♠ Vamos a Diseño/ Edición de HTML.
♠ Debajo de <body><div id='outer-wrapper'><div id='wrap2'> pegamos el código que nos den.

El resultado será el siguiente:

11 opinaron:

Yessmi

Muy bueno; no sabía cómo eliminar la navbar de mi blog.

Gracias

Responder
juan carlos

Me parece muy interesante la opción de personalizar la navbar.

Saludos :)

Responder
squirrel

Ya lo agregue y oculté la molestosa navbar; ahora pienso usar esa navbar con menús :o

Un besote :D

Responder
KArlA

Genial ;)

Es lo que buscaba

Besos

Responder
Jéssica YK

Yessmi: ahora sabes no sólo como eliminarlo, sino puedes ocultarlo o personalizarlo.

Saludos

Responder
Genial

Me parece muy buena la de ocultar que aparece cuando el mouse pasa. Creo que lo voy a aplicar a mi blog.

Un beso

Responder
Jéssica YK

Genial: espero que lo uses; es muy útil ;)

Saludos

Responder
Soledad

hola, estoy usando una plantilla que me descargué, pero quiero agregarle la navbar que antes utilizaba con mi vieja plantilla blogger y no sé como hacerlo.

Responder
Jéssica YK

Soledad: en ambos blogs veo la navbar de blogger; quizás ya solucionaste el problema o, ¿tenías una navbar propia? me gustaría saberlo para poder ayudarte.

S@lu2

Responder
Ladyguapas

Muchas gracias, muy bueno tu blog,... saludos
http://ladyguapas.blogspot.com/

Responder
Jéssica YK

» Ladyguapas:
Gracias por tu visita!

S@lu2

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio