Códigos e Tags condicionais do Blogger: entendendo as Conditional Tags

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

b-if-blogger-tagMuitos dos hacks e códigos que ensino a usar no Blogger precisam de alguns trechos que chamamos de “Conditional Tags” ou tags condicionais, que determinam o momento de cada trecho ou elemento ser usado ou exibido em seu blog. Esses códigos são extremamente importantes e vou mostrar nesse tutorial quais são e para que servem.

Você não precisa saber tudo de HTML para manter um blog no Blogger (Blogspot), mas algumas noções são importantes, por isso resolvi montar esse tutorial mais detalhado, já que os códigos de condicionais são amplamente usados em quase tudo que fazemos na hora de melhorar o layout (os templates) do Blogger.

Introdução.

A tag condicional é sempre a mesma no Blogger e recebe os trechos de códigos que vão determinar o seu funcionamento. Servem para dizer o momento certo de cada elemento executar uma função, como exibir um gadget, por exemplo.

Ó código diz que se determinada condição for cumprida, então algo deve ser executado. O código escreve-se assim:
<b:if ………….>
 
<b:else/>
</b:if>

A linha que diz “else” pode ser suprimida e, quando usada serve para apresentar outra possibilidade caso as condições não sejam preenchidas. Um exemplo fictício só para ilustrar:

<b:if algo for igual a X>
Quando algo é igual a X, esse texto aparece.
 
<b:else/>
Caso contrário, para todo o resto, aparecerá este aqui.
</b:if>

No meio disso você coloca aquilo que deseja executar. Mas o que interessa mesmo é saber como definir as igualdades e condições para que essa tag funcione e como determinar os critérios.

Os tipos de página do Blogger.

O Blogger classifica e determina vários “tipos” para as suas páginas com nomes técnicos específicos. Assim tempos 6 tipos de páginas, a saber:

  • Tipo 1 – Páginas dos ítens, que são os artigos e posts;
  • Tipo 2 – Páginas de índice do conteúdo e lista de marcadores;
  • Tipo 3 – Os arquivos, que são as páginas de lista de posts de cada mês;
  • Tipo 4 – As páginas estáticas;
  • Tipo 5 – Páginas especificas pela URL individual;
  • Tipo 6 – E a Home ou página principal.

Para cada uma as tags condicionais têm um modelo próprio, como mostro agora.

Tipo 1 – Páginas dos ítens.

Esse é o tipo mais usado que determina que algum elemento só deve ser exibido ou não quando se abre diretamente um post do blog, ou seja, a página do artigo.

<b:if cond='data:blog.pageType == "item"'>
O que deseja que apareça...
</b:if>

Tudo o que for colocado dentro dessas linhas só aparecerá quando uma página de algum artigo for aberta e em nenhum outro lugar será visível.

Tipo 2 – Páginas de índices.

Todo lugar em seu blog que exibir lista de seus postes, seja navegando pelos links de “Postagens mais antigas” ou “postagens mais recentes”, seja clicando em algum link de marcadores de conteúdo, referimo-nos ao índice do seu blog. Exatamente como o sumário de um livro.

<b:if cond='data:blog.pageType == "index"'>
O que deseja que apareça...
</b:if>

Esse tipo é ótimo para exibir elementos específicos na sidebar (barra lateral).

Obs.: também se refere à Home, à página principal do Blog com sua lista de postagens.

Tipo 3 – Páginas de arquivo.

As páginas de arquivo são aquelas formadas pela lista de posts de cada mês, quando clicamos em algum link do calendário do gadget “Arquivo do Blog”.

<b:if cond='data:blog.pageType == "archive"'>
O que deseja que apareça...
</b:if>

Algumas vezes essa condicional é usada junto com o do índice para abranger todas as listas de postagens do seu blog.

Tipo 4 – Páginas estáticas.

As páginas estáticas são novas no Blogger e referem-se às páginas permanentes do seu blog. Elas já são criadas por padrão no painel do Blogger sem alguns elementos, mas você pode querer exibir alguma coisa ou esconder outras.

<b:if cond='data:blog.pageType == "static_page"'>
O que deseja que apareça...
</b:if>

Podem ser usadas para garantir que banners e links de rodapé apareçam, inclusive anúncios ou gadgets que o Blogger por padrão não exibe.

Tipo 5 – Páginas especificadas pela URL.

Em alguns casos você pode querer que alguns elementos só aparecem numa determinada postagem e somente nela, sem aparecer em nenhum outro lugar.

<b:if cond='data:blog.url == "URL_do_conteúdo-específico"'>
O que deseja que apareça...
</b:if>

Isso é interessante para promoções, para exibir mensagens destinadas a um público específico ou até para limitar o conteúdo de seu blog ou diferencias algo no layout.

Onde está indicado de vermelho você coloca o endereço da postagem ou página específica de seu blog que deverá seguir aquelas condições.

Tipo 6 – Página principal do Blog.

Deixei essa por último por ser um pouco diferente. Se você quiser diferenciar a Home do seu blog de todas as demais, especialmente das do Tipo 2 (índice), ainda é possível criar uma condicional específica para esses casos.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
O que deseja que apareça...
</b:if>

Assim os elementos e informações que desejar só aparecem na primeira página do Blog e ficam escondidas em todo o restante. Isso é ótimo para banners de avisos, publicidades específicas ou gadgets direcionados ao seu público mais fiel, por exemplo.

Mudando a condição de igualdade para outras variáveis.

Mas nem sempre você quer uma condição de igualdade. Pode ser que em algum momento você quer que algo NÃO seja exibido em determinadas condições ou em certas páginas e partes de seu blog.

Você pode simplesmente mudar a condição de igualdade para uma outra variável. A condição de igualdade é determinada pelos símbolos “==” que se encontra na primeira linha da Conditional Tag.

Se você quiser dizer que algo só será executado se for diferente de uma certa condição, então toque aqueles símbolos por “!=” que significa “diferente de”. Assim:

==” significa que a condição é ser “igual a…”

!=” significa que a condição é ser “diferente de…”

Um exemplo seria:

<b:if cond='data:blog.url != data:blog.homepageUrl'>
O que deseja que NÃO apareça na Home e só apareça no restante do Blog...
</b:if>

Nessa forma de condicional estou usando o Tipo 6 de páginas do Blogger e o que fica dentro das tags condicionais NÃO aparecerá na página principal (Home), mas em qualquer outra página de qualquer outro Tipo.

Como e onde usar as Conditional Tags.

Normalmente essas tags de condições são usadas dentro do código-fonte do Blog para determinar como e onde cada elemento de página, seja um gadget, um widget, ou trecho de código será executado e funcionar no layout de seu blog.

O mais comum é para exibir ou esconder publicidade, elementos no rodapé ou botões de redes-sociais. Aqui mesmo no [ Ferramentas Blog ] uso em várias partes do blog e basta navegar por minhas páginas para ver que certos elementos e conteúdo só se exibem em alguns lugares e momentos. Inclusive em vários tutoriais uso essas condicionais já embutidos nos códigos que ensino você a colocar no seu blog e executar certas funções.

É preciso aqui usar a criatividade e fazer vários testes para saber exatamente como e quando usar da melhor forma em seu blog e descobrir todas as possibilidades. São muito úteis para dar uma dinâmica diferente ao seu blog, economizar espaço ou até ocupar os espaços certos nos momentos específicos de seu blog.

Outros artigos para Layout e códigos:

Já pensou em ser um(a) Blogueiro(a) mais Profissional?

Está cansado(a) de ser um blogueiro mediano(a) e que não tem resultados com seu Blog, não ganha dinheiro e não recebe as visitas que gostaria?

Você chegou aqui procurando como aprofundar seus conhecimentos em Blog, como Ganhar Dinheiro com seu Blog, aplicar as melhores técnicas de SEO, divulgar seu Blog e fidelizar seu público alvo. E posso te ajudar com essas coisas e muito mais, elevando o nível de qualidade do seu projeto.

Desenvolvi um curso completo, totalmente online, cobrindo tudo o que é necessário para um Blog atingir seu potencial máximo, detalhe por detalhe, que vão te tornar um Blogueiro de Elite:
  • Técnicas de produção de conteúdo
  • Fidelização do Público alvo
  • Divulgação e Técnicas de SEO
  • Métodos e técnicas de Monetização
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Esta é sua chance de ser mais profissional e ter um blog eficiente, completo e que pode ser sua fonte de renda permanente. Sou Blogueiro desde 2007 e condensei todo este conhecimento dentro do curso Blogueiro de Elite para entregar a você.

15 Comentários

  1. É super interessante levar tutoriais das conditional tags ao público leigo. Como designer, obviamente sei delas, porém sua codificação um tanto difícil dificulta o acesso dos leigos, e é muito legal alguém estar facilitando o acesso. Parabéns.

    Responder

  2. No Tipo 2, você falou que esta condicional pode ser usada para exibir elementos específicos na barra lateral. A que elementos você se refere? Poderia dar um exemplo?

    Abs

    Responder

  3. Muito bom esse artigo…

    Mesmo com toda complexidade desse assunto, você conseguiu ser simples e objetivo.

    Mesmo que os leitores não forem programar, é interessante que eles entendam o que estão colocando em seu código…

    Parabéns!

    Responder

  4. tem alguma condicional que eu possa usar que identifique, ao invés, de uma url completa, somente parte do texto da url, ou que identifique algum texto escrito na postagem?

    obrigado pela a ajuda desde já

    Responder

  5. infelizmente não há a possibilidade de criar condicionais pelo Blogger que identifique texto e conteúdo específico.
    O mais próximo disso são as condicionais para os marcadores de postagem.

    Responder

  6. Simplesmente SHOW!

    Conforme já falaram acima, vou explanou com tanta clareza este assunto que é de grande complexidade para quem não lida diretamente com isso.

    Eu já sabia da existência dessas condicionais através do site icebreaker, porém, com essa explicação sua falicitará ainda mais minha compreensão do tema.

    Só resta eu dar meus Parabéns!

    Responder

  7. Simplesmente, incrível. Estava procurando por um artigo assim em português a semanas! Obrigado!

    Gostei muito, da maneira que classificou os tipos de páginas, bastante didático. Meus parabéns!

    Mais só tenho uma dúvida: será que é possível aplicar uma condicional em dois tipos de páginas. Ex: uma condição restrita a somente as páginas de arquivo e índices?

    Obrigado!

    Responder

  8. Marcos, fiz tudo e da primeira vez funcionou. quando fui fazer novamente não consegui ocultar um elemento na página principal.
    alguma idéia do motivo?
    Obrigada!

    Responder

  9. Gosto muito desse blog! É uma mão na roda pra quem edita os próprios templates. Estou tentando fazer algo que tá bem complicado! Eu quero dar uma formatação diferente para as minhas postagens. Eu estou dividindo minhas postagens em 2 marcadores e queria dar um estilo diferente para as postagens de cada marcador. Exemplo: No marcador1 eu quero por uma imagem(que apareça somente nos posts com marcador1) e no marcador2 quero por uma cor de fonte diferente(que apareça somente nos posts com marcador2). Você saberia me ajudar? Seria bacana um post tutorial com esse tema. Tenho certeza que dá pra fazer, só não descobri como ainda. Se conseguir me ajudar ficarei muito grata! Obrigada!

    Responder

  10. fiz em um banner slide e deu certo em partes… o banner das imagens em slide some nas outras paginas mas as imagens dele ficam e ocupam a pagina toda uma em baixo da outra como resolver

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.