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 https://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 == “https://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 == “https://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 != ""’>
<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 != ""’>
<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ê!
