Março 1, 2022

Como alterar a Cor/Estilo de seu Blogger Navbar

dezembro 7, 2019

eu pessoalmente não seja um grande fã do blogger navbar, e muitas vezes você vai vê-la escondida no nosso premade blogger templates. De vez em quando, recebo uma solicitação para torná-los visíveis novamente, para que você possa usá-los para fazer login rapidamente em seu blog. Para aqueles de vocês que gostam de ter este pequeno bar, aqui está um pequeno guia sobre como personalizar a barra de navegação do blogger alterando sua cor ou tornando-a temporariamente oculta.

Personalize a barra de navegação do blogger

#1 Altere a cor

vá para o painel do Blogger. Você pode fazer isso usando sua barra de navegação o visitando a página do blogger. Uma vez logado, navegue até a seção Layout do menu à esquerda.

seção de Layout de painel do blogger

à direita, localize a barra de Navegação seção e clique no botão editar no canto inferior direito desta seção.

personalizando a barra de navegação do blogger

uma nova janela aparecerá, mostrando alguns estilos diferentes que você pode escolher para personalizar a barra de navegação do blogger.

opções de cores e estilo do Blogger Navbar

escolha o que você gosta e clique em ‘Salvar’.

isso é tudo! Sua barra de navegação agora está atualizada.

#2 ocultar a barra

para aqueles de vocês que gostam de ter uma barra de navegação do blogger, mas não gostam muito da aparência, temos uma opção perfeita. Você pode tornar a barra visível apenas quando alguém passar o mouse sobre o espaço onde deveria estar.

um exemplo pode ser visto, por exemplo, no projeto Bailee.

desta vez, você precisará visitar a seção de temas do seu painel do Blogger.

Como ocultar a navbar do blogger

Clique em ‘Editar HTML’ botão em seu design em miniatura à direita e adicione o seguinte código ao seu estilo de design:

/* NAVBAR */#navbar {opacity:0; filter:alpha(opacity=0);}#navbar:hover {opacity:0.7; filter:alpha(opacity=70);}

Se você não tem certeza de onde adicioná-lo, a maneira mais fácil é encontrar a seguinte linha:

]]></b:skin>

e cole o código acima dele.

Deixe uma resposta

O seu endereço de email não será publicado.