Dominio: gerenciandoblog.com.br
Chave: 00e39a4dc6309327334fa422703bddd1e83c509f
Hora do cache: 1511001067
Vida do cache: 1511044267
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Hospedagem - 728 x 90

Blogger

Como utilizar as condicionais do Blogger

BloggerAprenda a utilizar as condicionais do Blogger para definir gadgets ou partes inteiras do seu template que serão exibidos somente na página principal, nas postagens ou em páginas estáticas.



Introdução

Praticamente todos os templates atuais do Blogger utilizam o recurso das “condicionais”. Graças a elas, é possível dar aos blogs aspectos diferentes na página inicial e nas postagens e páginas estáticas.

Aqui mesmo no Gerenciando Blog você vê alguns exemplos:

  • Somente na página inicial, é mostrada abaixo do menu uma caixa chamada “Novidades Blogger”.
  • Nas páginas de postagens, são mostrados os botões para compartilhamento em redes sociais na parte direita da tela.
  • Nas páginas estáticas, não é mostrada a barra lateral de gadgets.

Além dos casos acima, há muitos exemplos onde as condicionais podem ser úteis:

  • Não mostrar as postagens sugeridas e perfil do autor na página inicial.
  • Usar tamanhos diferentes de fontes na página principal e nas postagens.
  • Adequar as heading tags às necessidades das páginas.
  • Mostrar ao Google o título adequado para cada página do seu blog.

Você perceberá o quanto elas serão úteis após entender o conceito!

IMPORTANTE: É perigoso fazer alterações como estas diretamente em seu blog original. É mais seguro você fazê-las antes em seu blog de testes, e só depois passar para o oficial. 


Caso ainda não tenha um, veja como é simples criá-lo em Como criar um blog de testes no Blogger.


O uso do <b:if…> e <b:else/> no Blogger

Como seu próprio nome diz, as condicionais são utilizadas para expressar condições.

Elas traduzem para a linguagem de programação uma frase que no mundo real seria “se for a página principal, exiba este texto”, por exemplo.

Essa frase seria expressa da seguinte forma no modelo do Blogger:

<b:if cond=’data:blog.pageType == “index”‘>
    Texto que será exibido na página principal
</b:if>

A primeira linha (<b:if cond=’data:blog.pageType == “index”‘>) é a condicional.

É nela que deve ser colocado o teste que será executado, para avaliar se as linhas seguintes devem ou não ser consideradas.

O <b:else/> funciona como um “senão”. Fazendo novamente a comparação da tradução, veja como ficaria no Blogger a frase “se for uma página de postagem, exiba a imagem 1; senão, exiba a imagem 2”:

<b:if cond=’data:blog.pageType == “item”‘>
    <img src=’imagem1.jpg’>

<b:else/>

    <img src=’imagem2.jpg’>
</b:if>

Tipos de testes que podem ser utilizados no Blogger

O primeiro ponto a entender são os operadores que o Blogger suporta.

São dois:

– igual – expresso pelos símbolos ==

– diferente – expresso pelos símbolos !=

Isso significa que, quando você quer uma condição que sempre seja executada para a página principal, por exemplo, você deve utilizar a linha abaixo:

<b:if cond=’data:blog.pageType == “index”‘>

Mas, se você quer que ela seja executada em qualquer página que não seja a principal, a instrução será a abaixo:

<b:if cond=’data:blog.pageType != “index”‘>

Tipos de páginas que podem ser utilizadas nas condicionais

Você deve ter notado que um dos principais usos das condicionais é para mudar a visibilidade ou comportamento dos elementos dependendo do tipo da página que está sendo exibida.

Para isso, a verificação sempre é feita usando o termo “data:blog.pageType”. Abaixo estão os tipos que podem ser usados para comparação:

  • index – É a página inicial do seu blog;
  • item – São todas as páginas de postagens do seu blog;
  • static_page – São todas as páginas estáticas do seu blog;
  • archive – São as páginas de “arquivo” do seu blog, normalmente trazendo as postagens de um mês (por exemplo http://www.gerenciandoblog.com.br/2014_05_01_archive.html).
  • error_page – Trata-se da “página não encontrada”, que é exibida quando alguém tenta acessar um endereço que não existe em seu blog.

Também é possível fazer a condicional para uma página específica do seu blog. Para isso, a condição é um pouco diferente (mude o trecho em vermelho para a página de seu blog que desejar):

<b:if cond=data:blog.url == “http://www.gerenciandoblog.com.br/p/contato.html“‘>

Também pode-se utilizar esse teste para a página de um Marcador específico:

<b:if cond=data:blog.url == “http://www.gerenciandoblog.com.br/search/label/SEO“‘>

Um exemplo prático: mostrando um gadget apenas na página principal

Para ficar mais claro, vou mostrar um exemplo prático. Vamos supor que eu deseje mostrar o gadget “Acompanhe as novidades”, que tenho aqui no Gerenciando Blog, apenas na página principal do blog.

1. O primeiro passo é localizar esse gadget em seu template. Vá até a área de “Modelo” do seu template, edite-o e utilize as teclas CTRL+F para encontrar o gadget.
Caso não saiba como fazer isso, leia o artigo Como editar o HTML de seu template no Blogger).

2. Você verá um trecho similar ao abaixo:

<b:widget id=’HTML9′ locked=’false’ title=’Acompanhe as novidades’ 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>

3. Você precisará adicionar duas novas linhas para a condicional, nos pontos mostrados abaixo em vermelho:

<b:widget id=’HTML9′ locked=’false’ title=’Acompanhe as novidades’ type=’HTML’>
  <b:includable id=’main’>
    <b:if cond=’data:blog.pageType == “index”‘>     <!– 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>

4. Pronto! Agora é só salvar o template e ver o resultado.

Conclusão

Este não é um recurso simples de utilizar.

Por outro lado, ele é extremamente poderoso e pode ser um diferencial importante para o seu blog.

Por isso, vale a pena você estudar o conceito e fazer testes até dominar seu uso.

Ele pode ser um grande diferencial para o seu blog!

E você, já conhecia as condicionais do Blogger? Deixe um comentário, citando exemplos de situações em que elas já foram úteis para você!

Como utilizar as condicionais do Blogger
5 (100%) 3 votes


De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Sobre o autor | Website

Especialista em Marketing Digital, presta Consultoria e auxilia diversos clientes. Amante por blogs, é responsável pela administração dos blogs Afiliados na web, Gerenciando Blog e Mundo Blogger.

15 Comentários

  1. Pauline disse:

    Muito boa a matéria, tenho um site em blogger e outro em wordpress, essas dicas facilitam muito a vida de quem não entende nada de programação.

  2. Fabio Alves disse:

    Obrigado por compartilhar mais uma dica útil.

  3. Edigley Alexandre disse:

    Olá, Adelson!

    Uso com frequência quase todas estas condicionais. Elas ajudam muito. No meu blog utilizo algumas para mostrar o "sobre o autor" de um guest post recebido. Se o artigo foi de minha autoria aparece a minha bio, se não, aparece outra.

    Não sei se blogger já oferece este recurso. Utilizo estas condicionais há um bom tempo,

    O artigo ficou ótimo. Creio que qualquer pode manipular estas condicionais para alguma função.

    Um abraço!

    • Adriano Luz disse:

      Olá, Edigley!

      O uso das condicionais para verificar o autor da postagem é um uso bem inteligente do recurso! É mesmo uma ótima forma de aproveitar as condicionais.

      E obrigado pelos seus elogios ao artigo! Tentei explicar o recurso da forma mais simples possível.

      Um abraço!

  4. Joanir Rocha Pidorodeski disse:

    Olá, Adelson,
    essa é uma das melhores dicas que já vi, usei elas em algumas funcionalidades no meu blog e deu tudo certo.
    Essa semana, porém, tentei usar as condicionais numa postagem. Tentei fazer com que uma imagem pequena aparecesse no resumo na página inicial, mas não aparecesse na postagem, mas parece que essas condicionais não funcionam dentro de postagens. Tentei tanto no blog de teste, como no blog oficial e não deu certo.
    Existe algum outro tipo de condicional que funcione na postagem? Ou há outra alternativa para isso que quero fazer? Desde já, agradeço por essa e por outras postagens que já me ajudaram muito.

    • Adriano Luz disse:

      Olá, Joanir!

      Que ótimo saber que gostou do artigo!

      Quanto à sua dúvida, ela é bem interessante. Mas, não conheço uma solução para ela. O problema é que o Blogger interpreta as condicionais antes de exibir a página, e não lê condicionais dentro do texto da postagem (que ele já considera estar formatado corretamente como HTML).

      Caso eu encontre alguma solução para isso, publicarei aqui.

      Um abraço!

  5. Adler Santos disse:

    Olá vc sabe a variável que o blogger utiliza para que eu consiga condicionar o código para desktop e celulares?

    • Edigley Alexandre disse:

      Olá, Adler!

      Não são condicionais do Blogger que permitirá visualizar seu blog em celulares (smartphones) ou tablets.

      O seu blog deve ter um template responsive. O código de seu template é que permitirá visualização em dispositivos móveis.

      Abraço!

  6. Anônimo disse:

    Bom Artigo, Parabéns!

    Mas tenho uma dúvida: estou tentando fazer uma condicional para exibir conteúdos dentro de uma DIV: Meu site está com o CSS ajustável por tipo de navegador, mas isso só muda o formato (tamanho) de exibição!

    Preciso ALTERAR O CONTEÚDO de uma determinada DIV para cada tipo de NAVEGADOR. Ex.: SE, Acessando a página via CELULAR (onde a div será ajustada por with Breakpoints) quero mostrar uma imagem X-para Celular com um link Y); CASO CONTRÁRIO, acessando a página via NAVEGADOR WEB (onde a div será ajustada por with Breakpoints) quero mostrar outra imagem Z-para WEB com um link W)…

    • Gustavo Ferreira disse:

      Tenho uma dúvida parecida, no caso quero colocar um banner para aparecer somente quando o blog for acessado pelo celular, quando ele for acessado pela web o banner não aparecerá.

      Consegui fazer isso usando modificando o template mobile para "personalizar" mas isso muda o layout e não fica de meu agrado. Se alguem poder ajudar ficarei agradecido !

  7. Alex disse:

    Muito bom gostei da dica parabens.

  8. paulo sergio francisco disse:

    No momento, você tem uma conta somente hospedagem. Portanto, esse código de anúncio será exibido como um espaço em branco fora de sites de parceiros de hospedagem

    alguém aqui no grupo sabe me dizer como resolver isso e que entende das configurações do blogger. pra mim poder colocar o adsense pra funcionar?

  9. Wybson Santana disse:

    Olá Adelson,

    Gosto muito dos seus artigos, ajudaram a corrigir muitos problemas no meu blog, que ainda é o meu primeiro projeto na internet.

    Essas condicionais resolveram meu problema com a página de erro personalizada do Blogger, pois consegui retirar a sidebar e o footer, deixando apenas uma mensagem para o visitante.

    Parabéns pelo seu trabalho!

Para enviar seu comentário, preencha os campos abaixo:

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.
Quer aprender como R$173.571,73 como Afiliado em 4 meses?Quero Assistir o Vídeo!