Ocultar a Navbar do Blogue Com estilo jQuery

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.

Como a imagem demonstra, vamos a Esquema, clicamos em Navbar -> Editar e na janela que se abre, seleccionamos Desativado.
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'/>

Depois na parte do CSS, colocamos o seguinte:

#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

Queres ler outro artigo ao calhas?

Comentários

Sem Opiniões Seja o primeiro a Comentar.

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.

Coisas K Aprendi por Aí

Pesquisar neste blogue

Justice League of America vs The Avengers