Blogger: Esconder, Retirar elementos do blogue

bloggertools

Hoje lendo um artigo num blogue de tutoriais e dicas reparei numa coisa que me levou a escrever este tutorial. :)

Como esconder ou retirar algum elemento do blogue.

Imaginemos que num determinado elemento da barra lateral (sidebar) não desejamos mostrar o titulo:


<b:widget id='HTMLXX' locked='false' title='QUALQUER_TITULO' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>

Existem varias maneiras de fazer isso, as mais comuns e divulgadas em blogues de tutoriais são as seguintes:

1º - Simplesmente, não colocar um titulo.

Resulta, mas aí temos o problema de achar o dito elemento no HTML do blogue se for necessário, caso tenhamos muitos elementos sem titulo.

Não recomendo esta opção.

2º - Apagando a parte do código referente ao titulo no HTML do elemento:


<!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>

Também resulta, e é uma maneira ensinada em muitos blogues de tutoriais (eu mesmo fiz isso muitas vezes), mas caso queiramos recolocar o titulo temos que andar a recolocar essa parte do código em quantos elementos tivermos retirado.

Torna-se cansativo e nada pratico, além de que não é muito recomendado para os navegadores.

3º - Esconde-se no CSS, com display:none e outras regras:


#HTMLXX h2 {
display:none;
height:0;
visibility:hidden;
}

Resulta, e é algo prático porque desta maneira podemos esconder elementos comuns a uma secção se for o caso, bastando para isso substituir #HTMLXX h2 por #NOME-DA-SECÇÃO h2.

A desvantagem neste método é que na verdade, os navegadores continuam a ler o elemento escondido/invisível. E isso em termos de carregamento das páginas não traz vantagens porque demora o mesmo tempo do que se o elemento estivesse visível.

Então qual o melhor método?

Bem, isso depende da situação e do que cada um quer fazer.

A minha maneira de retirar algo que não quero visível no blogue:


<b:widget id='HTMLXX' locked='false' title='QUALQUER_TITULO' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <!-- <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if> -->
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>

Simplesmente coloco essa parte entre <!-- e -->, como demonstrado acima. ;)

Dessa maneira, o elemento continua disponível no HTML mas não será lido pelos navegadores.

E caso seja necessário que volte a estar visível, basta retirar <!-- e -->.

E podemos usar este método para qualquer elemento, por exemplo aquela mensagem quando navegamos pelas etiquetas que diz "Mostrando mensagens com a etiqueta tal...", se não quisermos que essa mensagem seja exibida basta colocar da seguinte maneira:


  <!--   <b:include data='top' name='status-message'/>  -->


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