Assine Nosso Feed!

Receba Nossas Atualizações em Seu E-mail:

  • Receba Todos os Nossos Artigos Automaticamente em Seu E-mail
  • Tenha a Exclusividade de Receber Boletins do Nosso Blog
  • Inscrever-se no feed do Nosso Blog é Fácil, Rápido e Seguro
  • Ajude a fazer Nosso Blog Crescer!!!


  • 8 de janeiro de 2013

    Deixe a navbar do blog expansível

    Para os blogueiros que estão começando ou aqueles que não lembram, Navbar é aquela barrinha que fica no topo do blog com as opções de compartilhamento, ir para o proximo blog e até mesmo a opção de logar no Blogger, com o tamanho e posição pode ser desagradáveel, mas de alguns anos pra cá surgiram vários códigos para esconder  até que o próprio blogger lança a opção de desabilitar,


    Claro que existe vários usuários desta ferramenta e de uns tempos pra cá vários tutoriais de personalização surgiram, e como prometido deixaremos esta opção expansível ocupando o mínimo de espaço e assim deixando-a em forma de botão.


    1º- Clique em Editar HTML e expandir modelos de widgets.
    2º- Agora procure por ]]></b:skin>  e cole antes o seguite código. 

    /* NAVBAR
    ----------------------------------------------- */

    #navbar {
    width: 36px;
    border-top: 1px solid #888888;
    border-right: 5px solid #888888;
    position: fixed;
    top: 5px;
    left: -6px;
    background: #39b3f9;
    border-radius : 0 5px 5px 0;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);

    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;

    -moz-transition-delay: 1.3s;
    -ms-transition-delay: 1.3s;
    -o-transition-delay: 1.3s;
    -webkit-transition-delay: 1.3s;
    transition-delay: 1.3s;

    z-index: 10;
    }

    #navbar:hover {
    width: 100%;

    -moz-transition: all 0.6s linear;
    -ms-transition: all 0.6s linear;
    -o-transition: all 0.6s linear;
    -webkit-transition: all 0.6s linear;
    transition: all 0.6s linear;
    }

    Configurações:

    #fe6602 - aqui é a cor de fundo de deseja outra cor poderá encontrar em nossa paleta de cores
    width: 100%  - Define o tamanho da Navbar, de ficar grande basta trocar 100 para o tamanho desejado.

    O que achou desta opção? não esqueça de deixar seu comentário.

    4 comentários:

    1. Olá Juliano,

      parabéns pela dica, apesar de eu não gostar muito da navbar do blogger, ela ficou bem elegante.

      Abraço e sucesso!

      ResponderExcluir
      Respostas
      1. Também não gosto acho muito desagradável, mas com vários estilos de personalização ajuda muitos usuários desta ferramenta. muito obrigado pela participação.

        Grande Abraço. :D

        Excluir
    2. Olá Juliano.

      Que legal, gostei muito dessa customização na Navbar, ficou muito mais atraente. Acredito que quem utiliza dela certamente irá gostar desse artigo.

      Abraços!

      ResponderExcluir
      Respostas
      1. Realmente é um ótima opção para quem ainda usa a Navbar, fico feliz que tenha gostado muito obrigado pela participação ;)

        Grande Abraço.

        Excluir