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.

Demonstração

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:

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

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! 

Share This :