Ocultar a Navbar do Blogue Com estilo jQuery

bloggertools

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.

Nova opção Retirar Navbar do blogue
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 (Icone Editar) 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




Este Artigo foi útil?
Então se quiser, pode pagar-me um café. ;)

Escolhe com Sabedoria:

Deixa o teu comentário no Formulário Incorporado (NOTA: As respostas directas aos comentários só são possíveis utilizando este Formulário.) , ou no Antigo Formulário em uma nova janela, ou então no Formulário em Pop Up .

LER AS REGRAS ANTES DE COMENTAR! MOSTRAR EMOTICONS
Ler Antes de Comentar ◊  As Regras dos Comentários:
  • O comentário precisa ter relação com o assunto!
  • O comentário que deixares é da tua inteira Responsabilidade!
  • Comentários anónimos São permitidos,MAS:

    • Por favor, evita comentar em MAIÚSCULAS .
    • Por favor, não faças Spam.
    • Por favor, não utilizes termos obscenos ou ofensivos.
    • Comentários considerados Spam ou ofensivos serão apagados.
◊  Para deixares a URL do teu blogue, comenta com OpenID, ou com a opção NOME/URL.
◊  Podes usar algumas tags HTML como:
  • @<strong>Nome</strong> para mencionar a quem se responde o comentário.
  • <em>Fulano disse:<i>Texto Citado</i></em> para colocar uma Citação.
  • Para inserir um link ou um vídeo do YouTube, basta só escrever o endereço URL como texto normal.
  • <i>Texto em Itálico</i>
  • <b>Texto em Negrito</b>
    • HTML EXTRA:
    • [im]URL DA IMAGEM[/im] para colocar uma imagem.
    • [ma]Texto rolando[/ma] para colocar texto rolando.
    • [si="2"]Texto com tamanho determinado[/si] Altera o numero para determinar o tamanho da letra.
    • [co="red"]Texto em cor[/co] Altera a cor do texto.
    • [ce]Texto centrado[/ce] centraliza o texto.
    • [ma+]Texto rolando para a direita[/ma+]
    • [box]"encaixotar" o texto[/box]
    • [mark]Texto Marcado[/mark]
    • [card="blue"]Texto com fundo[/card] Altera a cor de fundo do comentário.
    • [im#]URL DA IMAGEM[/im] para colocar uma imagem que ocupe TODA a largura.
    • [hi="yellow"]Texto Destacado[/hi]
  • ATENÇÃO: Comentários com imagens ou vídeos com conteúdo ofensivo ou inadequado serão REMOVIDOS, SEM EXCEPÇÃO!!!
FECHAR
NOTA: os códigos dos emoticons devem ser inseridos separados das restantes palavras ou pontuação. OCULTAR EMOTICONS

0 comentários :

Enviar um comentário