Personalizando a navbar do blogger

Ha pouco tempo, poucos queriam manter a navbar, essa barra que fica acima do blog. A única cor disponível era a azul, que não combinava com todos os modelos de blog. Hoje a navbar está disponível em mais cores e podemos fazer com que ela se torne mais dinâmica. Ou se preferir ocultá-la mostraremos como fazê-lo.

Ocultar Navbar

Não é mais necessário colocar códigos na planilha para ocultar a navbar. Agora basta irmos em Layout > clicar em Editar na Navbar (barra de navegação) e selecionar Desativado.

Navbar Flutuante

Se pelo contrário, você gosta de visualizar a navbar, então você pode deixá-la flutuante para que continue vendo-a quando abaixar o scroll da página. Para isto, vá em Editar Html e antes de ]]>< /b:skin> cole o seguinte:

                                                                                                                                                        

#navbar-iframe {

top:0;

position:fixed;

}

Demonstração: Navbar Flutuante

Se quiser que a navbar fique flutuante porém na parte debaixo, troque top:0; por bottom:0;

Com qualquer uma das duas opções a navbar continuará visível mesmo que se suba ou abaixe a página.

Mostrar a navbar ao se passar o cursor

Uma boa opção para ocultar a navbar e fazer com que apareça somente quando passarmos o cursor sobre ela.

Para este efeito, basta adicionar antes de ]]>< /b:skin> o seguinte: 

#navbar-iframe {

opacity:.0;
filter:alpha(Opacity=0,FinishedOpacity=0);
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#navbar-iframe:hover {
opacity:1.0;
filter:alpha(Opacity=100,FinishedOpacity=100);
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}

Demonstração: Navbar oculta que aparece ao se passar o cursor