viernes, 18 de mayo de 2007

Jugando con la Navbar 2 (opacidad)

Después de pensarlo bien, encontré que era demasiado drástico "eliminar" la Navbar ya que puede ser bastante útil si se sabe ocupar, así que me puse a buscar ideas sobre como podría hacer que la Navbar se adaptara al estilo del blog o que por lo menos no fuera tan llamativa... fue así como llegue a un blog del que extraje dos métodos, hacerla semi-translúcida y ocultarla/mostrarla según la posición del mouse.

Hacer semi-translúcida la Navbar consigue un efecto que logra asemejar el color de la Navbar al color de fondo del blog. En mi caso, con la Navbar negra y fondo del blog verde, al definir una opacidad media para el div de la Navbar, esta se vera de un color verde oscuro.

Antes

Después


Para lograr esto se debe agregar el siguiente código css a la plantilla.

#navbar {
filter: alpha(opacity=50);
opacity: .5;
-moz-opacity: 0.5;
}


El "filter", "opacity" y "-moz-opacity" intentan fijar la opacidad del div cuyo id es "navbar" en un 50%, osea que la Navbar sera un 50% translúcida.

Si no entendiste nada te lo doy fácil...

Para hacer la Navbar semi-translúcida, en el "panel" de tu blog vas a "Plantilla" y luego a "Edición HTML" y, en el recuadro donde esta el código de tu plantilla buscas la linea que dice "</head>" (casi al final) y, agregas el siguiente código justo arriba de esa linea (sin borrarla obviamente):

<style type="text/css">
#navbar {
filter: alpha(opacity=50);
opacity: .5;
-moz-opacity: 0.5;
}
</style>


Has una "Vista Previa" y si esta todo bien guardas los cambios.

Viene desde: Jugando con la Navbar 1 (ocultar)
Continua en: Jugando con la Navbar 3 (ocultar/mostrar)

3 comentarios:

Francisco Javier Silanes Puentes dijo...

Me puedes ayudar para poder dejar el color de fonde de mi blog en color ver y lo mismo para el logo de blogger en la barra de direcciones como esta en el tuyo.

http://escala-n.blogspot.com

hodavame dijo...

Hola

Para cambiar el color de fondo del blog, tienes que hacerlo así...

En el Panel de Blogger haces click en "Diseño", en la siguiente pagina click en "Edición de HTML", ahí en el código de la plantilla, tienes que buscar esto:

body {
margin: 0;
padding: 0;
font-size: small;
text-align: center;
color: #333333;
background: #e0e0e0;
}

De ahí solo tienes que cambiar la linea "background: #e0e0e0;". Para dejar el mismo color que tengo yo, debería decir "background: #bca;", o puedes poner cualquier otro código de color. Pero puede que hayan imágenes que usen el color de fondo actual que tiene el blog, entonces si lo cambias puede que se vea un poco extraño, principalmente bordes, ahí tienes que ir probando como se ve.

El logo en la barra de direcciones se llana "favicon". Si quieres usar ese mismo, lo puedes descargar aqui...

http://hodavame.googlepages.com/blog-favicon.ico

O puedes crear uno tu mismo (son iconos de windows). Si buscas en google la palabra "favicon" encontraras mas información y incluso hay paginas donde tu subes una imagen a tu gusto y te la convierten en favicon para que la puedas usar.

Cuando ya tienes tu favicon listo, tienes que subirlo a algún servidor para que sea accesible desde internet... el mismo "Añadir imagen" de blogger te puede servir. Cuando ya tienes el link al favicon, lo agregas así...

En "Edicion HTML", en el código de la plantilla, busca la linea que dice:

<head>

(es como la 7º linea), justo debajo de esa linea tienes que poner lo siguiente:

<link href='http://link_al_favicon.ico' rel='image/x-icon'/>
<link href='http://link_al_favicon.ico' rel='shortcut icon' type='image/x-icon'/>

Pero donde dice "http://link_al_favicon.ico" tienes que poner el link a tu favicon.

..yyy eso es todo...

;)

LOKA77 dijo...

Muchas gracias por la explicacion, yo ya sabia como hacer para que aparezca y desaparezca pero necesitaba saber como hacer para que coincida mas con el color de mi blog
Gracias por la ayuda!!