domingo, 5 de agosto de 2012

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




5 comentários:

HumOrando disse...

Muito bom gostei, venha conheçer nosso blogger muito bom, vale apena.
-
http://oshumorando.blogspot.com/
-

Anônimo disse...

obrigado pela dica

Gilmar Torquato de Souza disse...

Muito bom. Gostei muito do resultado da Navbar oculta. Já estou utilizando. Obrigado. Queria saber como colocar o seu site no meu blog para que outras pessoas possam ver estas e outras dicas. Tem como?

Priscila disse...

olá Gilmar, pode adicionar o link ou banner se quiser como mostrado no link abaixo:

http://blogger-passo-a-passo.blogspot.com.br/2010/10/parcerias.html

Abrç.

António Manuel - Tómanel disse...

Muito bem!
Ótima publicação.
Goste de passar por aqui novamente.
Abraço.
http://umraiodeluzefezseluz.blogspot.com
oantmasantos2@gmail.com

Artigos Relacionados

Related Posts Plugin for WordPress, Blogger...