martes, 10 de marzo de 2009

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:

No hay comentarios:

Publicar un comentario