16 de mar de 2013

Código - Navbar do Blogger com efeito expansível

Durante muito tempo, a Navbar, aquela barrinha que fica no topo do blog com as opções de compartilhamento e algumas funções específicas do blogger, foi perseguida e vários códigos surgiram para retirá-la dos templates. Pouco tempo após isso, a própria central do Blogger dispôs a alternativa de usar ou desabilitar.

Claro que existem inúmeros usuários que não abriram mão dessa ferramenta e utilizam até hoje. E fato é, que de uns tempos pra cá vários tutoriais de personalização surgiram, e o tutorial de hoje ensina como deixar esta barra em forma de botão com uma opção expansível, ocupando assim, o mínimo de espaço do blog.


Alerta! Antes de fazer qualquer modificação, faça um backup do seu modelo.

Acesse modelo  Fazer backup/Restaurar  Fazer download do modelo completo.

1° passo: Acesse o painel do Blogger, escolha o blog que você deseja instalar, selecione a opção "Modelo" e clique em "Editar HTML".

2°passo: Agora usando o Ctrl + F, procure por ]]></b:skin> e cole antes o seguite código:

3° passo (opcional): Você pode alterar a cor de fundo, localizando #fe6602 no código acima e substituir sua cor de preferência. Você pode encontrar mais cores em nossa paleta de cores.

4° passo (opcional): Se o tamanho da navbar não lhe agradar, procure por: width: 100% e altere conforme o desejado.

Você ainda usa a Navbar? Espero que tenha gostado! Deixe seu comentário! 
Compartilhe essa postagem!
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

Recomendamos para você »

3 comentários

  1. Código perfeito. Já está no meu blog. Parabéns pelo trabalho!

    ResponderExcluir
  2. Muito diferente e o único código que realmente funcionou.
    Adorei.
    (k)

    ResponderExcluir
  3. Coloquei no meu, mais não deu certo. OBS.: ficou um ícone azul que expandia da esquerda para direta, mais não deu clique, falta alguma coisa ou não deu certo no meu template !

    ResponderExcluir

Seja livre para expor seu pensamento!

Se preferir, antes, leia nossas regras para comentários...
(Atenção: Comentários "Anônimo" não serão publicados. Escolha "Nome/URL". Obrigado!)
Bom comentário!

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
Pré-Designed by BlogThietKe Designed by @Mundo_Informal
© 2012-2014 .::Mundo Informal::. Todos os direitos Reservados
Licença Creative Commons
...See you!
Voltar ao topo