---

@CanalQb no YouTube

---

Guia Completo de Tags Condicionais do Blogger

---

🎯 Domine as Tags Condicionais do Blogger

Aprenda a controlar quando e onde cada elemento aparece no seu template Blogger. Com tags condicionais, você pode exibir widgets específicos em determinadas páginas, aplicar estilos personalizados, otimizar meta tags e criar templates verdadeiramente profissionais e dinâmicos.

✨ Por Que Usar Tags Condicionais?

🎨

Controle Total do Layout

Exiba ou oculte widgets, seções e elementos específicos em diferentes tipos de páginas. Por exemplo, mostre a barra lateral apenas na homepage e esconda em posts individuais.

🚀

Otimização de Performance

Carregue scripts JavaScript e CSS apenas nas páginas que realmente precisam deles, reduzindo o tempo de carregamento e melhorando a experiência do usuário.

📱

SEO Aprimorado

Otimize títulos, meta tags e estruturas de dados específicas para cada tipo de página, melhorando seu ranqueamento nos mecanismos de busca e aumentando o tráfego orgânico.

🎯

Personalização Avançada

Crie experiências únicas para diferentes seções do seu blog. Aplique estilos diferentes para páginas estáticas, posts, arquivos e páginas de erro 404.

💡

Flexibilidade Máxima

Combine múltiplas condições com operadores AND, OR e NOT para criar lógicas complexas e atender necessidades específicas do seu projeto.

🔧

Templates Profissionais

Templates Blogger complexos e profissionais fazem uso extensivo de tags condicionais. Dominar essa técnica é essencial para criar designs de alta qualidade.

⚙️ Como Funciona: Estrutura Básica

1

Entenda a Sintaxe Fundamental

Uma tag condicional no Blogger segue uma estrutura simples e lógica. Ela começa com uma tag de abertura que define a condição, seguida pelo conteúdo que será executado quando a condição for verdadeira, e termina com uma tag de fechamento.

Estrutura Básica:

<b:if cond='condição'>
    <!-- Conteúdo exibido quando a condição é TRUE -->
</b:if>

O atributo cond (de "condition") é onde você especifica a regra que deve ser avaliada. Se essa condição for verdadeira, todo o conteúdo dentro das tags será processado e exibido.

2

Adicione Condições Alternativas

Para criar uma lógica mais completa, você pode especificar um conteúdo alternativo que será exibido quando a condição for falsa. Isso é feito usando a tag <b:else/>, que funciona como um "senão" na programação tradicional.

Com Condição Alternativa:

<b:if cond='data:blog.pageType == "item"'>
    <!-- Este conteúdo aparece em páginas de posts -->
<b:else/>
    <!-- Este conteúdo aparece em todas as outras páginas -->
</b:if>

A tag <b:else/> também pode ser usada para criar lógicas OR (OU), permitindo verificar múltiplas condições em sequência até encontrar uma que seja verdadeira.

3

Aplique ao Seu Template

O conteúdo dentro das tags condicionais pode ser praticamente qualquer elemento HTML válido: divs, sections, widgets, tags de estilo CSS, scripts JavaScript, ou até mesmo outras tags condicionais aninhadas para criar lógicas mais complexas.

Exemplo Prático - Widget Condicional:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
    <div class='homepage-widget'>
        <h3>Bem-vindo ao Blog!</h3>
        <p>Este widget só aparece na homepage.</p>
    </div>
</b:if>

👥 Para Quem É Este Guia?

🎨

Designers de Templates

Profissionais que criam e customizam templates Blogger e precisam de controle preciso sobre a apresentação em diferentes contextos.

💻

Desenvolvedores Web

Programadores que trabalham com Blogger e desejam implementar funcionalidades avançadas e otimizações técnicas nos templates.

📝

Blogueiros Técnicos

Criadores de conteúdo que querem personalizar profundamente seus blogs e entender como os templates funcionam nos bastidores.

🚀

Otimizadores SEO

Especialistas em SEO que precisam implementar meta tags específicas, structured data e otimizações técnicas por tipo de página.

📋 Lista Completa de Tags Condicionais por Tipo de Página

Página de Arquivo (Archive)

Use esta condição para detectar todas as páginas de arquivo do seu blog, que exibem posts organizados cronologicamente por data (mês/ano).

<b:if cond='data:blog.pageType == "archive"'>
    <!-- Conteúdo para páginas de arquivo -->
</b:if>

Página de Erro 404

Detecta páginas de erro quando um visitante tenta acessar uma URL inexistente no seu blog. Perfeito para criar páginas 404 personalizadas.

<b:if cond='data:blog.pageType == "error_page"'>
    <!-- Conteúdo personalizado para erro 404 -->
</b:if>

Página Índice (Index)

Identifica todas as páginas que listam múltiplos posts, incluindo homepage, páginas de arquivo, páginas de labels e resultados de busca.

<b:if cond='data:blog.pageType == "index"'>
    <!-- Conteúdo para todas as páginas índice -->
</b:if>

Homepage Específica

Esta condição é mais específica que a anterior, detectando apenas a página inicial do blog, excluindo outras páginas índice.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
    <!-- Conteúdo exclusivo para homepage -->
</b:if>

Páginas de Posts Individuais (Item)

Detecta quando o visitante está visualizando um post completo individual, permitindo adicionar elementos exclusivos como comentários, compartilhamento social, posts relacionados, etc.

<b:if cond='data:blog.pageType == "item"'>
    <!-- Conteúdo para páginas de posts -->
</b:if>

Post Específico por URL

Permite segmentar um post específico pela sua URL completa. Útil para adicionar funcionalidades especiais em posts importantes ou de destaque.

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "2014/08/foo.html"'>
    <!-- Conteúdo para post específico 'foo' de agosto/2014 -->
</b:if>

💡 Dica Importante:

Substitua "2014/08/foo.html" pela estrutura exata da URL do seu post. A URL deve incluir a data (ano/mês) e o slug do post conforme configurado no Blogger.

Páginas de Label (Categoria)

Detecta quando o visitante está navegando por posts de uma categoria/label específica. Perfeito para adicionar descrições de categorias ou widgets relacionados.

<b:if cond='data:blog.searchLabel'>
    <!-- Conteúdo para todas as páginas de label -->
</b:if>

Label Específica

Segmenta uma categoria/label específica pelo nome. Útil para criar páginas customizadas para suas categorias principais.

<b:if cond='data:blog.searchLabel == "foo"'>
    <!-- Conteúdo para a label 'foo' -->
</b:if>

Páginas de Busca

Identifica quando o visitante está visualizando resultados de uma pesquisa interna no blog. Ideal para adicionar dicas de busca ou filtros adicionais.

<b:if cond='data:blog.searchQuery'>
    <!-- Conteúdo para páginas de resultados de busca -->
</b:if>

Busca por Query Específica

Detecta quando alguém pesquisa por um termo específico. Pode ser usado para rastrear termos populares ou oferecer respostas personalizadas.

<b:if cond='data:blog.searchQuery == "foo"'>
    <!-- Conteúdo quando alguém busca por 'foo' -->
</b:if>

Páginas Estáticas

Detecta páginas estáticas criadas através do menu "Páginas" do Blogger (como Sobre, Contato, Política de Privacidade, etc).

<b:if cond='data:blog.pageType == "static_page"'>
    <!-- Conteúdo para todas as páginas estáticas -->
</b:if>

Página Estática Específica por URL

Segmenta uma página estática específica pela sua URL. Ideal para adicionar funcionalidades únicas em páginas como "Contato" ou "Sobre".

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "p/foo.html"'>
    <!-- Conteúdo para página estática 'foo' -->
</b:if>

🔀 Operadores Lógicos: AND, OR e NOT

Os operadores lógicos permitem criar condições mais complexas e específicas, combinando múltiplas regras para um controle ainda mais preciso sobre quando e onde o conteúdo é exibido.

Operador AND (E)

Use o operador AND quando precisar que DUAS ou mais condições sejam verdadeiras simultaneamente. No Blogger, isso é feito aninhando tags condicionais uma dentro da outra.

Exemplo: Página índice E com busca

<b:if cond='data:blog.pageType == "index"'>
  <b:if cond='data:blog.searchQuery'>
    <!-- Exibido apenas em páginas de busca que são índice -->
    <p>Você está em uma página de busca com resultados</p>
  </b:if>
</b:if>

📌 Observação:

O conteúdo só aparecerá quando AMBAS as condições forem verdadeiras: a página deve ser do tipo índice E deve haver uma query de busca.

Operador OR (OU)

Use o operador OR quando quiser que o conteúdo apareça se QUALQUER UMA das condições for verdadeira. Isso é implementado usando a tag <b:else/> seguida de outra condição.

Exemplo: Página estática 'foo' OU 'bar'

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "p/foo.html"'>
  <!-- Conteúdo para página 'foo' OU 'bar' -->
  <h2>Conteúdo especial para estas páginas</h2>
<b:else/>
  <b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "p/bar.html"'>
    <!-- Conteúdo para página 'foo' OU 'bar' -->
    <h2>Conteúdo especial para estas páginas</h2>
  </b:if>
</b:if>

💡 Dica Profissional:

O conteúdo aparecerá se a URL for 'foo.html' OU 'bar.html'. Você pode encadear quantas condições OR precisar.

Operador NOT (NÃO)

Use o operador NOT quando quiser exibir conteúdo em TODAS as páginas EXCETO aquelas que atendem à condição. É implementado usando o operador de negação != (diferente de).

Exemplo 1: Todas as páginas exceto posts

<b:if cond='data:blog.pageType != "item"'>
  <!-- Exibido em todas as páginas EXCETO posts individuais -->
  <div class='sidebar'>Barra lateral</div>
</b:if>

Exemplo 2: Todas as páginas exceto homepage

<b:if cond='data:blog.url != data:blog.homepageUrl'>
  <!-- Exibido em todas as páginas MENOS a homepage -->
  <nav class='breadcrumbs'>Navegação estrutural</nav>
</b:if>

⚠️ Atenção:

O operador NOT (!=) é extremamente útil para esconder elementos em páginas específicas enquanto mantém-nos visíveis em todo o resto do site.

💼 Exemplos Práticos de Aplicação

Veja como aplicar tags condicionais em situações reais do dia a dia no desenvolvimento de templates Blogger.

1. Exibir Widgets em Páginas Específicas

Um dos usos mais comuns é controlar onde widgets aparecem. Por exemplo, você pode querer mostrar uma lista de posts populares apenas na homepage, ou exibir posts relacionados somente em páginas de posts individuais.

Widget de Posts Populares apenas na Homepage:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <div class='popular-posts-widget'>
    <h3>Posts Mais Populares</h3>
    <!-- Código do widget aqui -->
  </div>
</b:if>

2. Aplicar Estilos Diferentes em Páginas Estáticas

Páginas estáticas como "Sobre" ou "Contato" podem ter um design diferente do resto do blog. Use tags condicionais para aplicar CSS específico apenas nessas páginas.

CSS Específico para Páginas Estáticas:

<b:if cond='data:blog.pageType == "static_page"'>
  <style>
    .page-content {
      max-width: 900px;
      margin: 0 auto;
      padding: 40px;
      background: #f8f9fa;
    }
  </style>
</b:if>

3. Adicionar Meta Tags do Facebook e Twitter

Para melhorar o compartilhamento social, você pode adicionar Open Graph tags do Facebook e Twitter Cards apenas em páginas de posts, onde faz mais sentido.

Meta Tags Sociais apenas em Posts:

<b:if cond='data:blog.pageType == "item"'>
  <meta property='og:type' content='article'/>
  <meta property='og:title' content='data:blog.pageName'/>
  <meta name='twitter:card' content='summary_large_image'/>
  <!-- Outras meta tags sociais -->
</b:if>

4. Carregar JavaScript Apenas Quando Necessário

Para otimizar a performance, carregue scripts JavaScript pesados apenas nas páginas que realmente precisam deles. Por exemplo, um script de galeria de imagens só é necessário em posts que contêm galerias.

Carregar Lightbox apenas em Posts:

<b:if cond='data:blog.pageType == "item"'>
  <script src='https://cdn.example.com/lightbox.js'></script>
  <link href='https://cdn.example.com/lightbox.css' rel='stylesheet'/>
</b:if>

5. Otimizar Título da Página para SEO

Crie títulos de página otimizados para SEO que mudam dinamicamente dependendo do tipo de página que está sendo visualizada.

Título Dinâmico Otimizado:

<title>
  <b:if cond='data:blog.pageType == "item"'>
    <data:blog.pageName/> | <data:blog.title/>
  <b:else/>
    <b:if cond='data:blog.searchLabel'>
      <data:blog.searchLabel/> - <data:blog.title/>
    <b:else/>
      <data:blog.pageTitle/>
    </b:if>
  </b:if>
</title>

🛠️ Ferramenta Blogger Conditional Tag Wrapper

Para simplificar o processo de envolver seu código com tags condicionais, você pode usar uma ferramenta wrapper. Essa ferramenta automatiza o processo de adicionar as tags condicionais ao redor do seu código existente.

🎯 Como Funciona a Ferramenta Wrapper:

Passo 1: Copie e cole seu código HTML, CSS ou JavaScript no campo de entrada da ferramenta.

Passo 2: Selecione a condição desejada (homepage, post page, static page, etc) no menu dropdown.

Passo 3: Clique no botão "Wrap" para envolver automaticamente seu código com as tags condicionais.

Passo 4: Se precisar codificar o código (por exemplo, para inserir código AdSense no template), use o botão "Encode & Wrap".

Passo 5: Copie o resultado e cole no seu template Blogger.

Esta ferramenta é especialmente útil quando você tem blocos grandes de código e não quer digitar manualmente as tags condicionais ou correr o risco de erros de sintaxe. Ela garante que as tags sejam aplicadas corretamente, economizando tempo e reduzindo erros.

📊 Tabela de Referência Rápida

Use esta tabela como referência rápida para encontrar a tag condicional que você precisa.

Tipo de Página	Tag Condicional	Uso Comum
Homepage	data:blog.url == data:blog.homepageUrl	Banners, widgets especiais
Post Individual	data:blog.pageType == "item"	Comentários, compartilhamento social
Páginas Estáticas	data:blog.pageType == "static_page"	Layout diferenciado para Sobre/Contato
Páginas de Label	data:blog.searchLabel	Descrições de categorias
Páginas de Busca	data:blog.searchQuery	Filtros de busca, sugestões
Páginas de Arquivo	data:blog.pageType == "archive"	Navegação temporal
Página de Erro 404	data:blog.pageType == "error_page"	Páginas 404 personalizadas
Páginas Índice	data:blog.pageType == "index"	Listagens de posts

🚀 Dicas Avançadas e Boas Práticas

✅ Teste Sempre

Antes de publicar alterações no template ao vivo, sempre teste em um blog de desenvolvimento ou usando a visualização do Blogger. Erros em tags condicionais podem quebrar todo o layout.

📝 Comente Seu Código

Adicione comentários HTML descritivos dentro das tags condicionais para lembrar o que cada bloco faz. Exemplo: <!-- Widget sidebar apenas homepage -->

🔍 Use Ferramentas de Validação

Valide seu template XML após adicionar tags condicionais. O Blogger tem um validador integrado que aponta erros de sintaxe antes de salvar.

⚡ Otimize Performance

Use tags condicionais para carregar recursos (CSS, JS, fontes) apenas quando necessário, reduzindo o tamanho da página e melhorando os tempos de carregamento.

🎯 Seja Específico

Use a condição mais específica possível. Se você quer algo apenas na homepage, use data:blog.url == data:blog.homepageUrl em vez de data:blog.pageType == "index".

💾 Faça Backup

Sempre faça backup do seu template completo antes de fazer alterações significativas. Vá em Tema → Backup/Restaurar → Baixar tema.

⚠️ Erros Comuns a Evitar

🚫 Erro 1: Esquecer a Tag de Fechamento

Toda tag <b:if> precisa de um </b:if> correspondente. Esquecer isso quebrará todo o template.

❌ ERRADO:

<b:if cond='data:blog.pageType == "item"'>
  <div>Conteúdo</div>
<!-- Falta o </b:if> -->

✅ CORRETO:

<b:if cond='data:blog.pageType == "item"'>
  <div>Conteúdo</div>
</b:if>

🚫 Erro 2: Usar Aspas Incorretas

Use aspas simples (') no atributo cond e aspas duplas (") para os valores de string dentro da condição.

❌ ERRADO:

<b:if cond="data:blog.pageType == 'item'">

✅ CORRETO:

<b:if cond='data:blog.pageType == "item"'>

🚫 Erro 3: Esquecer data: nos Valores do Blogger

Ao referenciar variáveis do Blogger (como blog.url, blog.pageType), sempre use o prefixo data:.

❌ ERRADO:

<b:if cond='blog.pageType == "item"'>

✅ CORRETO:

<b:if cond='data:blog.pageType == "item"'>

📚 Recursos e Referências

Para aprofundar ainda mais seus conhecimentos sobre desenvolvimento de templates Blogger, confira estes recursos oficiais e comunitários.

📖

Documentação Oficial

Consulte a documentação oficial do Blogger para referências técnicas completas sobre tags de template e variáveis disponíveis.

👥

Fóruns da Comunidade

Participe dos fóruns de ajuda do Blogger onde desenvolvedores experientes compartilham soluções e respondem dúvidas.

🎓

Tutoriais Avançados

Explore tutoriais avançados sobre desenvolvimento de templates, incluindo técnicas de otimização e customização profunda.

🎉 Pronto Para Dominar Tags Condicionais?

Agora você tem todo o conhecimento necessário para criar templates Blogger profissionais e dinâmicos. Comece aplicando essas técnicas no seu blog hoje mesmo e veja a diferença que o controle preciso sobre seu template pode fazer!

🚀 Inscreva-se no @CanalQb

Tutoriais semanais sobre Blogger, templates e desenvolvimento web

🎯 Conclusão

As tags condicionais do Blogger são uma ferramenta poderosa e essencial para qualquer desenvolvedor de templates que deseja criar experiências verdadeiramente personalizadas e otimizadas. Com elas, você tem controle total sobre quando e onde cada elemento do seu blog aparece, permitindo criar designs profissionais que se adaptam inteligentemente a diferentes contextos.

Desde operações simples como mostrar um widget apenas na homepage até implementações complexas envolvendo múltiplas condições aninhadas com operadores AND, OR e NOT, as possibilidades são praticamente infinitas. Templates Blogger de alta qualidade fazem uso extensivo dessas tags para otimizar performance, melhorar SEO e proporcionar uma experiência de usuário superior.

Lembre-se sempre de testar suas implementações em um ambiente de desenvolvimento antes de aplicar no blog de produção, manter backups regulares do seu template e documentar bem suas customizações com comentários descritivos. Seguindo as boas práticas apresentadas neste guia e evitando os erros comuns, você estará no caminho certo para criar templates Blogger verdadeiramente profissionais.

Continue experimentando, aprendendo e refinando suas habilidades. Cada blog é único e as tags condicionais oferecem a flexibilidade necessária para criar soluções sob medida que atendem perfeitamente às suas necessidades específicas. Boa sorte no desenvolvimento dos seus templates!

---

💬 Tem dúvidas ou sugestões sobre tags condicionais?

Deixe seu comentário abaixo ou visite nosso canal no YouTube para mais tutoriais completos sobre desenvolvimento Blogger!

▶️ Assistir Mais Tutoriais no @CanalQb

📌 Compartilhe este guia:

#Blogger #TagsCondicionais #TemplatesBlogger #DesenvolvimentoWeb #BloggerTips #CustomizaçãoBlogger #SEO #WebDev #CanalQb