As condicionais do Blogger: ocultar e exibir só aquilo que você desejar - * Blog Elaine Gaspareto *

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

em 01/06/2015

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

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...

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


Copiar os códigos
19 comentários via Blogger
comentários via Facebook

19 comentários:

  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
    Respostas
    1. Vai em layout e procura páginas ou pages e desmarca as que você não quer que apareçam. =)

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

    ResponderExcluir
  9. Obrigada! Quis mudar a configuração do meu layout e acabei tendo problemas com o slide aparecendo em todas as páginas, mas seu tutorial me salvou.

    ResponderExcluir
  10. Muito bom!!! Muito útil! muuuito obrigada, mais uma vez rs

    ResponderExcluir
  11. Oi Elaine, obrigada pelas dicas. Sao muito úteis.
    Estou tentando exibir os widgets apenas na página inicial. Consigo ocultar do jeito que vc falou. O problema é que fica um espaço vazio no lugar que teria o conteúdo ocultado. Se puder me ajudar, agradeço.

    ResponderExcluir
    Respostas
    1. Marcela, dependendo de seu template o espaço vazio se notará mesmo.
      Infelizmente não há o que fazer pois como eu disse, depende muitas vezes do template.
      Qual seu blog?

      Excluir
    2. Aaah que coisa. Estou nas páginas de teste ainda. http://teste6delicatta.blogspot.com.br/

      Excluir
  12. Oi. Você já fez um post sobre como instalar esse gadgete que você usa para compartilhamento das redes sociais, como facebook e WhatsApp?

    Queria aprender. Bjs

    ResponderExcluir
    Respostas
    1. Joabson, fiz sim, procure por botões de compartilhar.

      Excluir
  13. Tem alguma condicional pra ocultar de acordo com o tamanho da tela? No caso, certo elemento apareceria no computador, mas não no celular.

    ResponderExcluir
    Respostas
    1. Sim, é o último código na página de códigos.

      Excluir

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…



Visualizações

Contando...

Dias online
Postagens
comentários