Blog Rentável

Aprenda 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'>
    
    <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"'>     
    <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ê!

Pages

Como utilizar as condicionais do Blogger