Arquivos do Website:

Como colocar cores diferentes no navbar do Blogger, sem mudar a cor de fundo do blog?


Mudar a cor do navbar do Blogger e, deixar na cor que quiser, é o desejo de muitos blogueiros e blogueiras. Mas, tem um problema, para deixar o navbar do blog na cor que quiser é preciso escolher em Navbar, a opção Claro Transparente e, deixar o fundo do blog na mesma cor do navbar. Isso não é nada bom, se você quer um blog com fundo branco e o navbar amarelo, não dá para fazer isso. Não dava!! Atenção! Estas dicas de personalização do navbar do Blogger, funcionam muito bem, apenas em templates baixados  diretamente do Blogger!


Mas, qual é a importância do uso do navbar personalizado no seu blog?
 

1)Ao ativar o navbar personalizado no seu blog, você vai estar adicionando para os seus leitores, mais uma ferramenta útil de buscas de artigos.
2)A caixa de buscas do navbar do Blogger, é muito mais eficiente do que a maioria das genéricas (salvo a caixa de buscas do google adsense), pois ela já é do Blogger, por isso tem mais precisão nos resultados de buscas.
3)É mais uma porta de entrada que se abre no seu blog, para possíveis novos visitantes (blogs vizinhos, entre outros) curiosos. Falo isto, devido à função "Próximo blog>>". Sempre alguém visita você.
4)O seu blog não vai ficar mal visto, só por que usa a plataforma Blogger, tem domínio personalizado e mostra o navbar do Blogger personalizado no cabeçalho.
5)Um blog é querido ou odiado pelos leitores, pelo tipo de conteúdo que apresenta e, não pela plataforma ou o domínio que o mesmo utiliza. Conheço excelentes blogues, em blogspot e, também excelentes blogues com domínio próprio que usam a plataforma blogger!

Vamos personalizar o navbar do Blogger e, deixá-lo bem maneiro combinando com a cor do cabeçalho do seu blog, sem precisar mexer na cor de fundo da página. É um procedimento simples, mas de preferência antes, faça um backup do seu blog, clicando em Baixar modelo completo.

1)A primeira coisa que você deve fazer é, fazer login no painel de controle do Blogger e clicar na opção Design;
2)Em Design, você vai ver uma barrinha azul, com a frase Navbar, escrita bem no centro. clique na opção editar;
3)Quando abrir a janela de Configuração do Navbar, escolha a opção Escuro Transparente e, clique em Salvar;
4)Agora vamos clicar em Editar HTML (não precisa Expandir modelos de widgets!);
5)Em Editar HTML, localize este código (ou algum outro parecido!)
#navbar-iframe { height: 0px; visibility: hidden; display: none; } no código fonte do seu blog e apague este trecho, caso você tenha utilizado o código para ocultar o navbar. Depois, clique em Salvar Modelo;
6)Se você exibe o navbar no seu blog, esqueça o "passo 5", vamos direto ao ponto. Localize no código fonte do seu blog este trecho: ]]></b:skin>
7)Cole este trecho de código: #navbar-iframe{background-color: #009900; float: bottom-page;} logo acima de ]]></b:skin> e, troque a cor do seu navbar mudando os valores numéricos. Veja a tabela de cores logo acima no início do artigo, tire uma base de cores usando os valores numéricos dela;
8)Teste a cor desejada e, clique em Visualizar;
9)Se estiver aparecendo o navbar com a cor que você escolheu, clique em Salvar Modelo;
10)Pronto! Agora o seu blog, ficou ainda mais legal!

Dica! Para localizar os trechos de códigos, no código fonte do seu blog, use a tecla F3 ou Ctrl+F. Vai aparecer uma barra com uma caixa de texto, na sua barra de status da janela do browser. Apenas cole os trechos de códigos ali, que você vai localizá-los facilmente no código fonte do seu blog.