Até há pouco tempo atrás somente existiam alguns truques para remover ou ocultar a Navbar do blogue para quem não queria a coisa a estragar o design que tinham criado para o dito cujo, ou porque simplesmente não gostavam da dita. :I
Eis alguns exemplos utilizados:
Método 1:
NOTA: Este exemplo é somente INFORMATIVO! Já não funciona.Procurar por
<body> e logo ACIMA, colocar o seguinte:<!--<body>-->
Este exemplo funcionava porque na altura o Blogger não incluía a Navbar no código HTML do blogue , mas sim através de um script que colava a dita à tag body.
Ao colocar o codigo acima, criava-se 2 tags body em que a primeira onde o Blogger colava a Navbar era ignorada pelos navegadores e dessa maneira removendo totalmente a Navbar.
Método 2:
NOTA: Este exemplo ainda é muito utilizado, principalmente devido ao bug de retirar a Navbar pelo Painel do BLogger (que mencionarei abaixo).Na parte CSS do blogue adicionamos o seguinte:
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}Este exemplo funciona porque nos estilos dizemos aos navegadores para não apresentar a Navbar, que a visibilidade deve estar oculta e a altura em 0 pixeis. Só para ter certeza que TODOS os navegadores percebam o que desejamos. =D
Método 3:
NOTA: Este exemplo é o que actualmente o Blogger disponibilizou ao implementar a Nova Interface.
O problema com este metodo (E principal razão porque muitos ainda preferem o Método 2) é porque ao desactivar a Navbar desta maneira, causa o bug de os icones de edição dos elementos na pagina (
) desaparecem também, obrigando o administrador do blogue a editar cada elemento pelo Painel.Pode não parecer um grande problema mas para quem utiliza alguma Condicional para que determinado elemento só apareça em determinado tipo de página, isso é um problemão já que no Painel só mostra os elementos que aparecem na página inicial do blogue. ~X
O que nos leva ao meu método, que utilizo aqui no blogue e que consiste em manter a Navbar escondida mas que pode ser apresentada caso o visitante assim o deseje:
Método 4:
NOTA: Este exemplo utiliza jQuery para funcionar.O primeiro passo é, caso ainda não tenha o jQuery instalado no blogue, colocar o seguinte ABAIXO de
]]></b:skin>:<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
left: 0;
z-index:9999;
position:absolute;
}
.escnav .out {
background: url(URL_DA_IMAGEM_A_APRESENTAR_QUANDO_A_NAVBAR_ESTÁ_OCULTA) no-repeat 50% 50%;
left: 10px;
top: -10px;
padding: 25px 30px;
position: absolute;
text-indent: -99999px;
}
.escnav .in {
background: url(URL_DA_IMAGEM_A_APRESENTAR_QUANDO_A_NAVBAR_ESTÁ_VISÍVEL) no-repeat 50% 50%;
left: 10px;
top: 20px;
padding: 25px 30px;
position: absolute;
text-indent: -99999px;
}ATENÇÃO que as imagens devem ter 24px por 24px para as definições de padding, top e left do código acima. Caso coloquem uma imagem com outro tamanho, devem ajustar essas definições de acordo com o tamanho da imagem que colocarem em background.
Um bom local para achar boas imagens é o IconFinder, basta escrever o que procuramos (em inglês), e ainda podemos escolher quais os tamanhos desejados. ;)
Para terminar, procuramos por :
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>
E LOGO ABAIXO colocamos o seguinte:
<div class='escnav'>
<a class='out' href='javascript:void(0);' id='togglenavbar_out' title='Mostrar Navbar'>+</a>
<a class='in' href='javascript:void(0);' id='togglenavbar_in' style='display: none;' title='Ocultar Navbar'>-</a>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$("#togglenavbar_out").click(function(){
$("#navbar-iframe").slideDown("1500");
});
$("#togglenavbar_in").click(function(){
$("#navbar-iframe").slideUp("1000");
});
$(".escnav a").click(function () {
$(".escnav a").fadeToggle('slow', 'linear');
});
});
//]]>
</script>
</div>
Pré-visualizar o blogue e se tudo estiver em ordem, salvar o modelo.
Agora a Navbar está escondida e aparece conforme o desejo do visitante. :D
Até Breve. :-F
Comentários
Malta, comentem, tanto críticas como elogios serão bem-vindos. E eu respondo, não prometo quando mas respondo.
Mas antes de comentarem, leiam as minhas Regras dos Comentários.
Se quiserem deixar o link para o vosso sitio, utilizar alguns estilos ou até inserir videos ou imagens nos comentários DEVEM mesmo ler as indicações nas Regras dos Comentários.
Caso prefiras comentar numa nova janela, ou se o formulário abaixo estiver nos dias ruins, podes clicar aqui.
Enviar um comentário