Saiba Como Colocar a Navbar ou barra de navegação de Blogger na parte inferior

Saiba "Como Colocar a "Navbar '

ou

 barra de navegacão 

de Blogger 

na parte inferior"

Muitas vezes colocado no topo das guias ou barras de menus de navegação próprios blogs, mas não deseja remover a barra de navegação que o Blogger tem um padrão. 

Uma boa solução para esses casos é colocar o padrão navbar Blogger no parte inferior da tela permanentemente.

Assim, 


podemos obter a atenção de nossas visitas a 

focar 

a nossa barra de navegação ou menu no topo, mas 

mantivemos a navbar padrão. Isto é muito fácil de 

fazer. Basta colocar esse código pouco antes do

 ]]> </ b: skin>

# Navbar-iframe {direita: 0px; bottom: posição: 0px: fixo; 0px esquerda}

Para que não apareça a navbar,

coloque acima de

  
]]> </ b: skin>

o código a seguir:

# Navbar-iframe {height: 0px; visibility: hidden; display: none}

Ficando assim:

# Navbar-iframe {height: 0px; visibility: hidden; display: none}

]]> </ b: skin>

Para que a "navbar" volte,

basta retirar o código!

Primeiro você deve remover esta linha de 

código 

# Navbar-iframe {height: 0px; visibility: hidden; display: none}

que você pode 

encontrar

antes de 

]]> </ b: skin>

salvar 

e

pronto!

	..." 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" "No início,  só existia a cor azul. " "Depois foi acrescentada a cor preta  e a seguir a bege. " ..." depois apareceu a opção transparente,  nas versões claro e escuro.  E atualmente ,  temos  a    opção   "Desativado",  ou seja,  podemos,  ..."excluir a "navbar" do template do blog! ... "as opções nativas" Caso queira, trocar   a cor ou desativar a "navebar" ...  Logado no painel do blogger, ...entrar em  ...Design" (ou "Lay-out") ... ...e, ...que aparece bem no começo do "lay-out"  do template de seu blog...   A "NAVBAR" é funcional.  E as que temos hoje, são bem básicas! Optando em deixar a "navbar" de teu  blog de seu jeito  Existem 03 (três) dicas, a saber: <div align="center"> <b>Trocar a cor da navbar por uma personalizada</b></div> <div align="center"> <b> </b> </div>   ..." trocar a cor da "navbar"... ..."para qualquer uma que você queira,   e não apenas aquelas nativas do Blogger." E, também  acrescentar um efeito hover  na " navbar" nota: efeito hover =  ao passar o mouse sobre a "navbar" ela mudará de cor . <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0b7botEZRVjwI5j7mPYfoS68gQdtyZjL0dGmz6ZnGIBC99618h85BhaHUFLaZArxNHOM45L_7Hr0IyZGBTDenhb3ukB-F-TDidVF9dZg0fM2_sH7NVrH931z6bA2yKSGDZWCpDbMdyhh8/s1600-h/image15.png"><img alt="image" border="0" height="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWCDNgvTJvjTYMszNQS_wOl0EDO4ugd6QKF2I1WWVPbTvvAWbe03TEPTiuYt1pfk3t_7K8x1lh8pG_a8-KSStnlX3laBs5s4TCJK32-oemCoeipJU543JHg91up-fbSmBn8Yxciqse4Swr/?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 2px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="image" width="650" /></a> Para começar: Logado no seu painel blogger, ... clique em "Lay-out"  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 o código:   <pre class="brush:xml"> #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; }   </pre>  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. Pronto! Se um dia quiser retirar o efeito basta apagar o código e salvar as alterações em seguida. O outro efeito é:  ..." faz com que a "navbar" fique visível não importa o quanto você role a página para baixo.   Acima de ]]> </ b: skin> cole o código: <pre class="brush:xml">#navbar-iframe { left:0; top:0; position:fixed; } </pre>   E salve as alterações.  Caso queira, voltar ao que era antes,  basta apagar  e salvar em seguida"   "Navbar" oculta: Optando em não exibir  a "navbar",  mas também não quiser    excluí-la: ..." para ocultar a "navbar",  e ela só   aparecerá se passarmos  o mouse sobre ela. Acima de ]]> </ b: skin> cole o  código: <br /> <pre class="brush:xml">#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; }   </pre> <br />   Clicar em  Salvar alterações  e e Pronto!!!     <span style="color: #ff8321;"> ... curiosidades... ..." ao configurar a "navbar" para o modo "Desativado" também desativamos aquelas "ferramas" de edição que aparecem ao lado dos gadgets do blog. " ''Para quem nunca gosta delas (e também por questões de segurança -  já que houve casos de "bug", fazendo elas aparecerem para qualquer pessoa,  mesmo sem ter feito login) " ..."colocando a "navbar "em modo "Desativado" elas somem."    ...+ 01 (huma) curiosidade: tabela de cores: clique aqui