24

Ocultar / Mostrar la navbar de Blogger

Hace tiempo vimos como ocultar la Navbar de Blogger y poco después veíamos también como ocultarla y volver a mostrarla al paso del puntero sobre ella.

En esta entrada veremos como ocultarla o mostrarla a voluntad mediante el uso de javascript.
Lo haremos usando un enlace que podremos colocar en la sidebar o en la parte superior del blog por ejemplo.

Si estamos usando alguno de los métodos anteriores y queremos usar este, lo adecuado en este caso es retirar el código anterior.

[1] En nuestro panel de Blogger vamos a Diseño y en Edición de HTML localizamos la etiqueta </head> en el código de nuestra plantilla y justo encima colocamos el script:

<script type="text/javascript">
var showHeader=false;
function ShowHideNav()

{showHeader=!showHeader;
var nav=document.getElementById("navbar-iframe");
if (showHeader)
{nav.style.visibility="visible";
nav.style.display="block";}
else
{nav.style.visibility="hidden";
nav.style.display="none";}
}
</script>
<style type="text/css">
#navbar-iframe {
visibility: hidden;
display: none;}
</style>

[2] Si vamos a mostrar el enlace para Mostrar / Ocultar la Navbar en la sidebar, añadimos un nuevo elemento HTML y colocamos este código dentro:
<span style="cursor:pointer;" onclick="ShowHideNav();">
Mostrar Navbar / Ocultar Navbar
<a style="visibility:hidden;">
</a></span>

[3] Si queremos mostrarlo en la parte superior del blog, justo sobre la cabecera, colocamos el código anterior antes de:

<div id='header-wrapper'>

Mostrar/ocultar Navbar

También podemos añadir algún estilo al texto de los enlaces, por ejemplo color o tamaño de texto:

<span onclick='ShowHideNav();' style='cursor:pointer;color:#ff0000;font-size:15px;'>
Mostrar Navbar / Ocultar Navbar
<a style='visibility:hidden;'>
</a></span>

Entradas Relacionadas:

24 comentarios:


Rudolph

A mi la verdad no me gusta mucho la idea, prefiero ocultarla y ya. Que así de mucha utilidad no se me hace, más que el buscador >.<

Bonzu Pipinpadaloxicopolis III

Me recuerda a un código que usaba para ocultar la sidebar hace tiempo, el que solía usar era más corto, te lo dejo y aplicándolo a la navbar sería este:

<a href="javascript:void(0);" onclick="getElementById('navbar').style.display='none';getElementById('navbar').style.display='none';">OCULTAR NAVBAR</a> | <a href="javascript:void(0);" onclick="getElementById('navbar').style.display=''; getElementById('navbar').style.display='true'">RESTAURAR NAVBAR</a>

Rosa

BonzuSi, viene a ser lo mismo... en realidad es un "truco" bastante viejo ya, pero ultimamente me lo han pedido varias personas...

MAURO

Rosa te hago una consulta, ya que no encontre algun post antiguo q me saque la duda. Sabes como hacer para que el blog tenga una entrada principal y luego las demas entradas antiguas aparezcan en dos columnas como en este blog?: http://www.planetabocajuniors.com.ar/

Bonzu Pipinpadaloxicopolis III

Oye Rosa y se me olvidaba, ya había notado tu nuevo diseño en el Escaparate, me gustó el color de fondo y los títulos con fecha y número en los posts. Es el título del blog que no me ha gustado mucho (en su color, fuente).

Por lo demás está bonito.

Monica

La verdad Rosi¡¡¡EXTRAÑO Muchisimo tu otro(BLOG)este Diseño me es tan ajeno.te quiero a vos con tu Compu en la cabezera....Besotes Rosita :((

Rosa

BonzuMe encanta que me des tu opinión sincera...y ahora...¿Que fuente/color me aconsejarías tu? ;)

Rosa

MonicaEs normal lo extrañes supongo... pero de ajeno nada eh? sigues estando en tu casa cada vez que vengas, solo ha cambiado la decoración lo demás está todo como antes :D
¡Un besote!

Rosa

MAURO Para hacer eso con una plantilla "normal" habría prácticamente que re-diseñarla entera... en concreto ese blog que me muestras usa una conocida plantilla de Wordpress que ya está diseñada así en un principio...
Sin mucho problema las encuentras así para Blogger en http://btemplates.com/

Felipe

Hola Rosa! :)
Hace tiempo no me pegaba un paseito por aquí, sii.. el nuevo diseño de tu blog al principio se me hizo muy extraño, pero bueno, no pierdes esa elegancia en el diseño. :)
Cada uno decide si muestra o no la navbar, aunque creo que la mayoría no la usamos; seguro que si pudieramos personalizarla más en cuanto a diseño y opciones, muchos la empleariamos, en vez de usar menus tipo Dock o cosas así.

Te envio un saludo cordial Rosilla Pilla! ;)
Chau.

Carlos

Buenas!
En mi opinión la Navbar casi no se usa, sobretodo aquellos que llevan/llevamos más tiempo usando blogger.
Me gusta mucho tu nuevo estilo del blog. Le da un toque elegante. Lo unico que no me convence (para gustos los colores) es la cabecera.

Un saludo

Bonzu Pipinpadaloxicopolis III

Creo que una cursiva le asienta bien, con algún color de ese verdito que usas o un rosa como tú.

Ese fondo gris es el que igual no me convence, ponle un degradado u otro, bueno es mi opinión y dirás que qué criticón es este Bonzu pero ya ves :$.

Felipe

Si de pronto quisiera realizar una sugerencia, no seria el color, sino la fuente... podrías hacerte un texto en "Textanim" que hay varias fuentes interesantes para experimentar.
pero ahí está bien.. me asustan un poco los ratones... parecen reales... :D

Rosa

BonzuEncantada de recibir tu opinión, para nada la considero una critica, sino ganas de ayudar... aún no me decido del todo, ando a "tirones" cambia de aquí y de allá :$

Rosa

Felipe ¡Fuera ratones! :S ja,ja,ja.

Felipe

Jajajaja :)
Me has sacado una sonrisa...
Y aun mas la impresión que me llevo al ver que has hecho un cambio en el title... se ve bastante bien...
Te ha quedado bastante mono ;)
Un abrazo.

Rosa

Felipe Aún no me convence demasiado, pero bueno... es una de las fuentes que pueden añadirse al blog desde Gogle Font :D

Felipe

Oye si, no he hecho pruebas aún con ello, hace unos días leí algo en Vagabundia al respecto, y creo que me sirve para un nuevo blog que estoy creando, y precisamente para el titulo, donde andaba haciendo pruebas con fuentes cufon, pero como siempre, a nuestro compañero IE parecen no caerle del todo bien :) Jaja

Igual pienso que más allá de los consejos y recomendaciones (que muchas veces vienen muy bien), lo mas importante es que nos guste a nosotros.

Adios señorita.! :D

Igor Sousa

Pelo o que eu entendi, usando este código, é necessário clicar em Mostrar/Ocultar para que a navbar seja mostrada ou escondida.

Há alguma forma de fazer este mesmo efeito, mas sem a necessidade de clicar no botão? Apenas passando o mouse por cima da área onde fica a navbar?

Beijos.

Rosa

Igor Sousa Si :D

http://elescaparatederosa.blogspot.com/2007/03/navbar-barra-blogger-mgica.html

Igor Sousa

Muito obrigado Rosa!!
Isso me ajudou muito!

Beijos.

Rosa

Igor Sousa obrigada!! :D

EDVICA

HOLA ROSA! PRIMERO DEJA FELICITARTE POR TAN GRANDE LABOR,ME ENCANTA TU BLOG PORQUE NOS ENZEÑAS A MUCHO QUE NO SABEMOS MANEJAR ESTOS CODIGOS Y NOS ENREDAMOS FACILMENTE,MIL GRACIAS QUE DIOS TE BENDIGA,SALUDOS!!!

Rosa

EDVICA Bendiciones para ti!!! :D

Publicar un comentario en la entrada

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S