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="http://lh3.ggpht.com/-IfMenmyDMvg/UBhbgPhacGI/AAAAAAAAZmU/CX4Gc4Vaw_s/s1600-h/image15.png"><img alt="image" border="0" height="25" src="http://lh4.ggpht.com/-C-z-beNAfmw/UBhbhOTXZNI/AAAAAAAAZmc/fw4qJClp9MQ/image_thumb9.png?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



contador

Postar um comentário

0 Comentários