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

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>

VISTO EN:Diversas y Variadas