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
Obs.: Neste código acima poderá vir um código de comentários ex.: <
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)
9 comentários
comentárioscomplicado
Reply-=|G¡äñ|=-, qual a sua dúvida?
Replyeu não intendi NavBar com OnmouseOver
Replygostei desse blog
entrem no meu:
BDR
Boa, onde eu colo o
Reply#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.
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:
Reply<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?
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 ;)
ReplyValeu, otimo post, Certinho!
Replyobrigada sempre!
Vlw ajudou bastante!
ReplyCara o template que eu baixei não mostra o navbar, ai eu queria exibir ele novamente mas não consigo... Me ajuda por favor!!
ReplyTodos 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.