Ocultar/Exibir a Navbar do Blogger

Já mostrei aqui no blog vários truques para ocultar ou dar uma solução para a navbar do Blogger. A navbar hoje já tem mais recursos e é muito elegante mais mesmo assim não fica muito bonito em um blog profissional, por isso você verá hoje como criar um botão que permite oculta-lá e também exibi-lá. Veja abaixo como proceder:

Eliminando hacks anteriores relacionados a navbar

Procure partes de CSS relacionados a navbar, basta pesquisar em seu blog trechos como os abaixo e simplesmente elimina-lós:

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

ou

#navbar-iframe{
display:none !important;
}

ou

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

Se encontrar outras parecidas com estas que foram mostradas elimine.

Aplicando o Hack

1) Acesse o painel do Blogger(blogger.com)

2) Vá em "Layout/Design"-> "Editar HTML" e procure pelo seguinte trecho utilizando as teclas "CTRL" e "F" para procurar:

</head>

Antes do código acima insira o seguinte:

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

3) Salve as alterações

4) Vá agora em “Layout/Design”-> “Elementos da página”-> “Adicionar um Gadget”-> “HTML/JavaScript” e insira o seguinte código:

<span style="cursor:pointer;" onclick="ShowHideNav();">
Ocultar/Exibir Navbar
<a style="visibility:hidden;" href="http://www.noticiaeblog.com"></a>
</span>

5) Salve e visualize.

Referência: Derya's WebResource.axd

Artigo original do Notícia e blog.