As condicionais do Blogger: ocultar e exibir só aquilo que você desejar

em 1 de junho de 2015

Uma das coisas que eu mais gosto no Blogger são as suas condicionais. Elas permitem personalizar e controlar muitas coisas em nossos blogs!
Não sabe o que é e nem para o que servem?
Vou explicar:

O que são e o que fazem as condicionais do Blogger?

As condicionais do Blogger permitem que a gente controle a exibição de elementos de página.
Por exemplo, vamos supor que eu não quisesse que as postagens relacionadas que estão ao final dos meus posts aparecessem na página inicial do blog, mas somente nas páginas internas dos posts.
Com a condicional que exibe apenas nas páginas internas eu consigo isso.

Outro exemplo:
Suponha que eu tenha um slide em meu blog e não queira que ele apareça nas páginas estáticas e nem nas páginas internas dos posts, somente na Home. Com a condicional certa eu consigo isso.

Vou dar um exemplo prático.
Clique aqui: Loja de templates e serviços adicionais da Elaine (vai lá, tem uns templates novos à venda!)
Agora clique na aba Avaliações dos clientes, que coloquei recentemente na loja.
Percebeu que o slide sumiu?
Então, usei a condicional que define que o slide só aparecerá na página inicial, a home da loja.

Quais são as condicionais do Blogger?

Separei as principais, tá?
Tem outras, como a que eu uso aqui no blog e que mostra a primeira postagem inteira e as demais resumidas, mas hoje vou focar nas mais usadas.
Vou separar por função, pra ficar mais simples.

Função exibir

Para exibir um elemento apenas na página inicial:
<b:if cond='data:blog.url == data:blog.homepageUrl'>

Para exibir um elemento apenas nas páginas internas, de marcadores e de arquivo:
<b:if cond='data:blog.pageType != "item"'>

Para exibir um elemento apenas nas páginas internas:
<b:if cond='data:blog.pageType == "item"'>

Para mostrar um elemento apenas nas páginas estáticas:
<b:if cond='data:blog.pageType == "static_page"'>

Para mostrar um elemento apenas nas páginas de Arquivos:
<b:if cond='data:blog.pageType == "archive"'>

Função ocultar

Para ocultar um elemento apenas na página inicial:
<b:if cond='data:blog.homepageUrl != data:blog.url'>

Para ocultar um elemento apenas na página inicial, de marcadores e arquivo:
<b:if cond='data:blog.pageType == "item"'>

Para ocultar um elemento apenas nas páginas estáticas:
<b:if cond='data:blog.pageType != "static_page"'>


Você pode copiar todos esses códigos clicando no botão abaixo:

Copiar os códigos


Como aplicar essas condicionais?


Agora vou ensinar como inserir as condicionais em seu template.
Requer paciência e conhecimento ao menos básico em HTML, mas não é impossível de fazer, com dedicação a gente consegue quase tudo!
Vou dar 2 exemplos, preste atenção.

Exemplo 1:
Suponhamos que você tenha em seu blog um slide (mas pode ser qualquer elemento de página inserido via Layout) e queira que ele apareça apenas na página inicial do blog.
Faça assim:

Antes de mais nada descubra qual a ID do elemento de página que deseja aplicar a condicional. No meu exemplo vou aplicar a condicional que mostra o elemento apenas na home do blog.
Vá ao seu gadget e  clique para edita-lo; no alto da caixa com o código do gadget veja qual seu ID.
Assim, usando meu slide slide da loja como exemplo:


Cada gadget/widget possui um ID, ok?

Agora, sabendo qual o ID do seu gadget ao qual será aplicada a condicional vá ao painel do seu blog, clique na aba Modelo, clique em Editar HTML, e localize seu widget.
Assim:


Ao clicar na setinha expandem os widgets, clique naquele que deseja achar; ao fazer isso você será levado direto ao que procura.
Será um código mais ou menos assim (claro que com o ID de seu widget):

 <b:widget id='HTML2' locked='false' title='' 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>

Não se assuste, o importante é saber que cada widget começa com <b:widget e termina com </b:widget>, conforme marquei em azul.

Aplicando a condicional

Preste atenção ao trecho que marquei em pink. A condicional que você vai aplicar deve ser colocada após esse trecho.
Assim:
<b:includable id='main'><b:if cond='data:blog.url == data:blog.homepageUrl'>

Se for preciso abra um espaço e cole a condicional.
Agora essa condicional precisa ser fechada.
Veja o trecho que marquei em laranja.
Após esse trecho cole a tag de fechamento </b:if>
Fica assim:
<b:include name='quickedit'/></b:if>

Então o código do widget, completo, com a condicional que faz o slide ser exibido somente na página inicial fica assim:

<b:widget id='HTML2' locked='false' title='' type='HTML'>
<b:includable id='main'><b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!-- 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:if>
</b:includable>
        </b:widget>



Exemplo 2:
Aqui vamos supor que o elemento ao qual você deseja aplicar a condicional tenha sido inserido direto no código fonte.

Neste segundo exemplo vamos supor que você tenha em seu blog os posts relacionados e queira que eles apareçam apenas nas páginas internas dos posts.Se for do tipo Linkwithin siga o mesmo procedimento que expliquei acima.
Contudo, se for um código inserido direto no template, como é o caso das Postagens relacionadas sem precisar do Linkwithin que ensinei aqui no blog proceda da seguinte maneira:

Localize o código que faz o script aparecer, no caso do meu tutorial é o 3º código.
Antes do começo do código aplique a condicional escolhida, no caso é aquela que exibe o elemento apenas nas páginas internas.
Ao final do código coloque a tag se fechamento </b:if>
Salve e veja se deu certo.
Caso não tenha dado releia o tutorial e refaça os passos.


Como eu disse esse tutorial requer paciência e um conhecimento ao menos básico em HTML, mas é simples e com dedicação todo mundo vai conseguir.

Guarde esse tutorial em seus favoritos, acredite: cedo ou tarde você vai precisar...

Ah, e não deixe de visitar:
Loja de templates da Elaine.
Tem coisas tão bonitas lá...

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

9 comentários , comente também!

  1. Elaine amei os templates,todos ficaram lindos.
    Parabéns sucesso para você,beijos

    ResponderExcluir
  2. Amei essas dica Elaine. Provavelmente vou testar. E usar. Abraços

    ResponderExcluir
  3. cara, exatamente o que estava procurando =o

    Obrigada Elaine

    BlogSemDrama.blogspot.com

    ResponderExcluir
  4. Oi querida!
    Estou chocada!!! Que aula foi essa????
    Quanta informação, quantas novidades, quanto empenho!
    Te admiro tanto, tanto, tanto...
    Obrigada pelas dicas e por dividir seu conhecimento!
    Beijos,
    Cris

    ResponderExcluir
  5. Muito obrigada Elaine! Meu blog usa milhares de dicas suas, usei todas as dicas do marcador otimização e me ajudou bastante, além dos outros milhares de posts que li aqui, é claro! Seu blog é realmente incrível! Adorei o post!
    Gostaria de tirar uma dúvida: Como você coloca os códigos dentro dessas caixinhas? Eu li seu post que ensinava como evitar plágio, e bloqueei o botão direito do mouse, e gostaria delas para meus posts de tutoriais!

    Email: mahpereira02@gmail.com

    ResponderExcluir
  6. Muito obrigado pela dica Elaine. Todas as suas dicas são sensacionais, ajudam em tudo.
    As condicionais ajudam a esconder a barra de rolagem horizontal? Porque em meu blog apareceu e não sai, aumento e diminui a largura ela continua, achei código (overflow-x:hidden}) na internet que esconde, mas desconfigura a página e plano de fundo. Desde já agradeço :).
    O blog é este: http://temploremano.blogspot.com.br/

    ResponderExcluir
  7. Olá Elaine, acompanho sempre seu blog e tem me ajudado mt.
    Gostaria de uma dica sua, que tenho certeza que algumas pessoas tem e eu estou enfrentando uma dificuldade para tirar a data da pagina contato e sobre mim. Acho desnecessário e gostaria de saber se tem como? Obrigada desde ja . Um grande beijo

    ResponderExcluir
  8. Muito obrigado pelo tutorial Elaine Gaspareto, foi de grande ajuda

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…