Mostrar, ocultar ou exibir a NavBar do blogger com o mouse sobre ele.

Há ainda muitos templates na internet que não vem com estas modificações, e muitos dos blogueiros não gostam de exibir a NavBar do blogger, ou também para aqueles que querem voltar a exibi-la já que o blogger fez modificações na navegação da NavBar:

Link para "Seguir Blog" que é o mesmo do Google Friends Connect.
Link para "Sinalizar" onde o usuário faz denúncias de plágio (principalmente) ou de direitos autorais...
Link para "Compartilhar" onde se faz um compartilhamento do blog. (é o que mais gostei).

Prosseguindo com o tutorial:

Estas modificações para fazer a barra do blogger desaparecer.

Em Painel > Layout > Editar HTML >
Cole este código abaixo da tag de estilo

<b:skin><![CDATA[
Obs.: Neste código acima poderá vir um código de comentários ex.: <![CDATA[/*Comentários aqui e fechamento dos comentários=*/ a partir daqui pode se implementar.

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

Estas modificações para fazer a barra do blogger aparecer.

Em Painel > Layout > Editar HTML >
localize este código:

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

Apague ou coloque tags de comentários:

/*#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}*/

NavBar com OnmouseOver
Ao passar o ponteiro do mouse sobre a Navbar que está oculta, ela aparecerá.

Esta implementação pode ser vista neste blog.

Em Painel > Layout > Editar HTML >
localize este código em vermelho, caso não encontre pule para o passo2 e cole o código apenas:

#navbar-iframe {
...código até o fechamento...
}

Altere para:

#navbar-iframe{
opacity:0.0;
filter:alpha(Opacity=0)
background-color:#ffffff;
}

#navbar-iframe:hover{
opacity:1.0;
filter:alpha(Opacity=100, FinishedOpacity=100)
}

Uma ~~breve~~ explicação do css:

#navbar-iframe
localiza a <div (#) com a id='navbar-iframe'
<div id='navbar-iframe'>
e
#navbar-iframe:hover
Possui as mesmas caracteristicas do #navbar-iframe só que é ativado apenas com o mouse sobre o elemento em questão.

{ ... }
inicio e fim do bloco de modificação: Tudo dentro deste bloco irá modificar a div que contenha o id especificado.

height: 0px;
Especifica a autura(height) em pixels (px)

visibility: hidden;
Estiliza a visibilidade para "escondido" (hidden)

display:none;
Estiliza o display (mostrar/exibir) para none (não mostrar)

opacity:0.0;
Determina a Opacidade em 0 (não mostrar)

filter:alpha(Opacity=0)
Determina a Opacidade em 0 (não mostrar) (Internet Explorer, ~~falescido~~)

background-color:#ffffff;
Determina uma cor de fundo em Hexadecimal (padrão #RRGGBB)

opacity:1.0;
Determina a Opacidade em 100 (mostrar)

filter:alpha(Opacity=100, FinishedOpacity=100)
Determina a Opacidade em 100 (mostrar) (Internet Explorer, ~~falescido~~)

Author : » Daniel Ikeda «

Ordenar: DescAscby @dfikeda

9 comentários

comentários

Blogger Tube

01/07/2012, 16:20 delete

Cara o template que eu baixei não mostra o navbar, ai eu queria exibir ele novamente mas não consigo... Me ajuda por favor!!

Big Time Rush BR FC

10/09/2011, 10:36 delete

Vlw ajudou bastante!

cris

25/08/2011, 12:42 delete

Valeu, otimo post, Certinho!

obrigada sempre!

Anônimo

15/07/2011, 22:30 delete

Puxa, obrigada! Eu não queria que a navbar aparecesse, mas preciso das funcionalidades dela. Passar o mouse por cima é a solução ideal! Felicidades ;)

» Daniel Ikeda «

22/04/2011, 23:19 delete

Olá Jessyca, Faça o seguinte: Entre no blogger, vá em "DESIGN" > "EDITAR HTML" > "Baixar modelo completo" > Salve em local de fácil acesso e na página de "EDITAR HTML" novamente, localize o código:

<b:skin><![CDATA[

que fica logo no ínicio dos códigos, após esta linha se reparar há algumas linhas de código que começam com '.' (ponto) ou '#' (jogo da velha) antes de uma dessas linhas cole o código, visualize e verifique se está tudo certo.

Caso tenha dado certo clique em "SALVAR MODELO" e pronto!

Veja um exemplo:

...
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name : Community
Designer: Bie
URL : http://www.bietemplates.com
Collaborated with http://www.ipietoon.com
----------------------------------------------- */
.clearer {
clear:both;
}

#code {
border:1px solid #390;
font-family:Courier New,Courier,monospace;
overflow:scroll;
padding:10px;
}
...

Cole o código:

...
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name : Community
Designer: Bie
URL : http://www.bietemplates.com
Collaborated with http://www.ipietoon.com
----------------------------------------------- */
AQUI ou
.clearer {
clear:both;
}
AQUI ou
#code {
border:1px solid #390;
font-family:Courier New,Courier,monospace;
overflow:scroll;
padding:10px;
}
AQUI
...

Qualquer dúvida pode perguntar, ok?

Unknown

22/04/2011, 17:46 delete

Boa, onde eu colo o

#navbar-iframe{
opacity:0.0;
filter:alpha(Opacity=0)
background-color:#ffffff;
}

#navbar-iframe:hover{
opacity:1.0;
filter:alpha(Opacity=100, FinishedOpacity=100)
}

????
Não consegui porque não sei onde colar.

Renata"

15/12/2010, 15:24 delete

eu não intendi NavBar com OnmouseOver
gostei desse blog
entrem no meu:
BDR

04/07/2010, 16:06 delete

-=|G¡äñ|=-, qual a sua dúvida?

-=|G¡äñ|=-

04/07/2010, 15:33 delete

complicado

Todos os comentários serão moderados, aguarde a publicação.

Outros assuntos ou solicitações pessoais devem ser feitas por meio do formulário de contato.