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

Muitos 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:

• 10 novidades do Blogger (Blogspot) para seu Blog
• O Código-Fonte dos novos Templates do Blogger (Blogspot)
• Aprenda um pouco de HTML para editar seu Blog
• Como criar Template para Blogger – Designer do Modelo
• As Meta Tags de descrição do Blogger nos mecanismos de busca e questões de SEO