Personalizando a navbar do blog

em 1 de agosto de 2012

Recentemente o Blogger apresentou algumas novidades em relação à navbar do blog.
Navbar: barra de navegação nativa do Blogger, que aparece acima do cabeçalho e que permite, por exemplo, acessar a aba Design diretamente do blog
Para dar uma ideia do quanto essa ferramenta evoluiu quando eu comecei meu blog, em 2008, só existia a cor azul. Depois foi acrescentada a cor preta e a seguir a bege. Tempos depois apareceu a opção transparente, nas versões claro e escuro. E agora surge a opção Desativado, ou seja, podemos, sem gambiarra nenhuma, excluir a navbar de nossos blogs. Veja as opções nativas:
Navbar nativa do Blogger
Para trocar a cor ou desativar a sua basta entrar em Design (ou Layout) e editar o item Navbar que aparece bem no começo do layout de seu blog.

Eu, pessoalmente, preferi manter pois acho funcional. Mas ela é bem basiquinha, né? Entretanto dá pra deixar a navbar do seu blog mais interessante. Vou ensinar 3 truques legais:

Trocar a cor da navbar por uma personalizada
 
O primeiro truque é trocar a cor dela para qualquer uma que você queira, e não apenas aquelas nativas do Blogger. E também acrescentar um efeito hover em sua navbar, ou seja, ela mudará de cor ao passar o mouse sobre ela.

image

Pra começar entre em seu painel do blog e clique em Layout. Agora clique em Editar abaixo de Navbar.
Na janela que abrir clique em Claro transparente. Salve.
Agora clique na aba Modelo. A seguir clique em Editar html.
Se aparecer uma mensagem clique em Prosseguir.
Agora tecle Ctrl+F dentro da caixa de código e localize esta linha:

]]></b:skin>

E acima dela cole este código:

#navbar-iframe {
background:#B40431; /* Cor da navbar*/
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#navbar-iframe:hover {
background:#000000; /* Cor da navbar ao  passar o mouse*/
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}   
Em #B40431 é o código da cor da navbar. Troque pela sua cor preferida, que combine com seu template. Em #000000 é a cor da navbar em estado hover, altere para a cor que desejar.
Depois de pronto clique em Salvar.
Tá feito.
Se um dia quiser retirar o efeito basta apagar o código e salvar as alterações em seguida.

Aqui tem um site para você copiar o código da cor que quiser: Tabela de cores


Navbar fixa no topo da página
 
O outro efeito é também muito legal. Ele faz com que a navbar fique visível não importa o quanto você role a página para baixo. Vamos aprender?

Acima da mesma linha  ]]></b:skin> cole o seguinte código:

#navbar-iframe {
left:0;
top:0;
position:fixed;
}

E salve as alterações. Se não gostar basta apagar e salvar em seguida.
Visite minha Galeria permanente de blogs e veja como fica o efeito.
Aproveite e divulgue seu blog gratuitamente!
 
Navbar oculta
Mas e se eu não quiser exibir a navbar, mas também não quiser  excluí-la, tem jeito? Sim, tem! Vamos usar um truque para ocultar a navbar, e ela só aparecerá se passarmos o mouse sobre ela.

Acima da mesma linha ]]></b:skin> cole este código:

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

}   

Clique em Salvar alterações e está feito.

Algumas curiosidades:
Notei que ao configurar a navbar para o modo Desativado também desativamos aquelas "ferramentinhas" de edição que aparecem ao lados dos gadgets do blog. Para quem nunca gostou delas (e também por questões de segurança já que houve casos de bug fazendo elas aparecerem pra qualquer pessoa, mesmo sem ter feito login) #ficaadica: se colocar a navbar em modo Desativado elas somem.

Outra curiosidade, e desta vez em relação aos comentários do blog: parece que foi corrigido um velho erro do Blogger: agora, quando a postagem não tem comentário aparece o texto Nenhum comentário e se tiver apenas 1 comentário aparece o texto Um comentário.
Antes não havia flexão numérica, o que sempre desagradou aos blogueiros mais exigentes. Antes tarde do que mais tarde, né?
E parece que vem mais mudanças por aí. #oremos

*Para copiar os códigos pare o mouse sobre eles e clique no primeiro ícone que surgir. Daí abrirá uma janela, onde está o código a ser copiado.

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

30 comentários , comente também!

  1. Oi, Elaine! Menina, gostei das dicas, mesmo eu já tendo desativado minha navbar. lembro que procurei em vários blogs e acabei descobrindo como tirar a barra eu mesma, fuçando no blogger. essa coisa dos comentários admito que tbm me irritava um pouco, portanto eu gostei MUITO dessa "inovação" do blogger.
    Teu blog é lindo, queridona, bjo! ;-)

    ResponderExcluir
  2. Adoro suas dicas Elaine. Inclusive já utilizei algumas para editar meu blog. Como meu blog é novo, ainda vai completar 4 meses, já comecei no novo Blogger. Não sei como funcionava a plataforma antiga. Também já faço parte da galeria permanente. Obrigada por partilhar conosco todas essas dicas. Bjs.

    Jussara

    ResponderExcluir
  3. Boa noite Elaine.
    Voce é um show com o seu blog
    sempre ajudando as blogueiras
    com dicas novas e lindas.
    Obrigada por todas nós.
    Deus a abençoe diariamente.
    Um beijinho carregado de paz.

    ResponderExcluir
  4. Postei tbm umas semanas atrás sobre a opção desativar a navbar. Descobri essa opção ao acaso enquanto personalizava o blog. Contudo percebi um bug, tbm por acaso, qdo estava customizando a parte dos comentários. A opção excluir comentário (no modo página incorporada) não aparecia. Não imaginava q pudesse ter relação com a navbar. Só descobri isso testando o template em outro blog q por sorte tinha a navbar. Então qdo tirei a navbar a opção excluir saiu de novo. Reativei navbar e a opção excluir reapareceu, bingo! Depois testei tirar navbar apenas pelo código HTML, e não deu mais bug.
    Achei q meu template estava estragado, e já ia jogar fora todo meu trabalho por algo tão simples de resolver. Talvez possa ajudar alguém aí.
    Beijo...

    ResponderExcluir
  5. Ui, muita calma nessa hora rsrsr
    Vou ler com calma.
    Tiro cópia e fico tentando fazer no Blog experiência.
    Ás vezes dá certo ......
    Beijos querida.

    ResponderExcluir
  6. Adorei as dicas! Vou experimentar!!

    Beijokinhas,

    Luiza Mallmann
    decorarsustentavel.blogspot.com

    ResponderExcluir
  7. Oi Elaine!
    São sempre boas dicas, mas prefiro deixar esta parte como está. É, tem umas mudancinhas no ar. Agora também apareceu no perfil o G+.
    Beijinhos!

    ResponderExcluir
  8. Olá Elaine, tudo bem? Li alguns artigos do seu blog,como: "Como proteger meu blog de ser excluído?" e quero te agradecer por todas as dicas. Foram e são muito úteis pra mim,estou pensando e ter o meu domínio próprio.Tudo de melhor pra vocês e sucesso.Beijos

    ResponderExcluir
  9. Olá Elaine,
    Como sempre suas dicas são super valiosas e muito legal.

    Xerokas
    Go

    ResponderExcluir
  10. Querida Elaine na minha correria estou tão em falta com vc e com os meus projetos!!!
    Um agosto muito iluminado para todas nós!!!
    Agosto é também o mês que o Projetando Pessoas completa 2 anos!!
    bjs Sandra
    http://projetandopessoas.blogspot.com.br//

    ResponderExcluir
  11. Olá Eliane,parabéns pelas dicas,seu blog é ótimo!
    Em outros blogs que crei fiz mudanças na navbar,inclusive de passá-la para o rodapé,mas nesse atual,que ainda está oculto,não estou conseguindo nem colocar,já tentei tudo...mesmo assim obrigada!

    Um beijo no coração!

    ResponderExcluir
  12. Olá eliane porque minha navbar está na sidebar? tenhos meus blogs e quando ponho os templates fica na sidebar , o pior que é todos os templates veja em meu blog de teste não quero tirar a navbar, me ajude. amei o blog e recomendarei. Desde fá agradeço Bjs
    Meu blog de teste é http://bel-testesetestes.blogspot.com.br/

    ResponderExcluir
  13. Elaine querida!
    Levei a navbar.
    Obrigada,bjs

    ResponderExcluir
  14. Eu segui sua dica, ficou lindo. Amei! Obrigada por tudo!

    ResponderExcluir
  15. Valeu Elaine

    sempre boas dicas utilizei navBAR no topo, tudo certinho...

    Depois nos ajude com calma, como realizar um banner bem legal
    e deixar tudo parecido com template.

    Forte abração do AMIGÃO HINS

    ResponderExcluir
  16. Elaine querida!!!Passei aqui para te ver e ler este post também.
    Só vc mesma para me fazer sorrir ou rir mesmo....rsrs...
    Detesto dia de finados,perdi meu pai depois de 12 anos morando em outro estado,10 meses após eu ter voltado para Minas ele faleceu.
    Menina quando vi este aviso que vc colocou acima eu gargalhei...kkk....
    Hoje descobri que assino duas vezes postagem automática do seu site.
    Você me faz sorrir,seu site me faz feliz.
    Sucesso para vc querida,bjs

    ResponderExcluir
  17. Preciso de ajuda mais que urgente!!! Desativei minha opção Navbar para ver como era, mas agora eu não consigo reativa-la já que não consigo achar a opçãp designer. O que faço? Como faço para voltar a opção? To quase chorando!!!
    Brigada!!
    aescrevinhadeira.blogspot.com

    ResponderExcluir
    Respostas
    1. Amanda, calma!
      Faça login pelo Blogger (www.blogger.com) e a seguir clique no nome de seu blog.
      Vai abrir uma página com as opções, clique então em Layout (que é o mesmo que designer) e volte a navbar.
      Caso tenha excluído pelo código-fonte clique em Modelo e apague o código que tiver colocado.
      Certo?
      beijos

      Excluir
  18. Elaine depois de alguns dias afastada do blog,vim aqui te ver.
    Coloquei a navbar no meu blog.
    Obrigada por tudo.
    Linda noite para vcs,bjs

    ResponderExcluir
  19. Como deixar um blog com boa aparência, no meu já mexi e parece que tá ficando pior!

    Tudoparasndroid Tech.blogspot.com

    ResponderExcluir
  20. Eu não estou conseguindo copiar o código, me ajudeee !

    ResponderExcluir
  21. Elaine filha amada de Deus,
    Deus a abençoe sempre, como você nos ajuda! Obrigada por me ensinar sobre a navbar, ela aparecia embaixo e queria no topo e por ensinar como colocar o botão pinterest na imagem das postagens, levei os 2 tutoriais e deu certíssimo, um abençoado final de semana.

    ResponderExcluir
  22. Oie flor...muito legal sua dica...vou fazer!!

    te seguindo se puder retribuir...
    bjns
    http://juranemeupovo.blogspot.com.br/

    ResponderExcluir
  23. Boas...

    Adorei as dicas, contudo, por mais que tente, não consigo colocar a navbar no meu novo template. Achas que me podes ajudar?

    ResponderExcluir
  24. Olá Elaine, tudo bom, meu problema é que excluir no navbar de volta no meu blog como faço?

    ResponderExcluir
    Respostas
    1. Giso, se excluiu do código fonte só trocando de template pra voltar.
      Se só desativou via Design basta reativar.

      Excluir
  25. Parece que essas modificaões.... mas nao dá de copiar os códigos e depois colar:(
    Tento arrastar o texto com o mouse mas nao dá certo.

    ResponderExcluir
  26. Olá Elaine. agradeço pelas dicas.
    Gostaria que me ajudasse, não consigo copiar o link.

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…