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

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

b-if-blogger-tagMuitos 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:

.

15 Comentários

  1. 脡 super interessante levar tutoriais das conditional tags ao p煤blico leigo. Como designer, obviamente sei delas, por茅m sua codifica莽茫o um tanto dif铆cil dificulta o acesso dos leigos, e 茅 muito legal algu茅m estar facilitando o acesso. Parab茅ns.

    Responder

  2. No Tipo 2, voc锚 falou que esta condicional pode ser usada para exibir elementos espec铆ficos na barra lateral. A que elementos voc锚 se refere? Poderia dar um exemplo?

    Abs

    Responder

  3. Muito bom esse artigo…

    Mesmo com toda complexidade desse assunto, voc锚 conseguiu ser simples e objetivo.

    Mesmo que os leitores n茫o forem programar, 茅 interessante que eles entendam o que est茫o colocando em seu c贸digo…

    Parab茅ns!

    Responder

  4. tem alguma condicional que eu possa usar que identifique, ao inv茅s, de uma url completa, somente parte do texto da url, ou que identifique algum texto escrito na postagem?

    obrigado pela a ajuda desde j谩

    Responder

  5. infelizmente n茫o h谩 a possibilidade de criar condicionais pelo Blogger que identifique texto e conte煤do espec铆fico.
    O mais pr贸ximo disso s茫o as condicionais para os marcadores de postagem.

    Responder

  6. Simplesmente SHOW!

    Conforme j谩 falaram acima, vou explanou com tanta clareza este assunto que 茅 de grande complexidade para quem n茫o lida diretamente com isso.

    Eu j谩 sabia da exist锚ncia dessas condicionais atrav茅s do site icebreaker, por茅m, com essa explica莽茫o sua falicitar谩 ainda mais minha compreens茫o do tema.

    S贸 resta eu dar meus Parab茅ns!

    Responder

  7. Simplesmente, incr铆vel. Estava procurando por um artigo assim em portugu锚s a semanas! Obrigado!

    Gostei muito, da maneira que classificou os tipos de p谩ginas, bastante did谩tico. Meus parab茅ns!

    Mais s贸 tenho uma d煤vida: ser谩 que 茅 poss铆vel aplicar uma condicional em dois tipos de p谩ginas. Ex: uma condi莽茫o restrita a somente as p谩ginas de arquivo e 铆ndices?

    Obrigado!

    Responder

  8. Marcos, fiz tudo e da primeira vez funcionou. quando fui fazer novamente n茫o consegui ocultar um elemento na p谩gina principal.
    alguma id茅ia do motivo?
    Obrigada!

    Responder

  9. Gosto muito desse blog! 脡 uma m茫o na roda pra quem edita os pr贸prios templates. Estou tentando fazer algo que t谩 bem complicado! Eu quero dar uma formata莽茫o diferente para as minhas postagens. Eu estou dividindo minhas postagens em 2 marcadores e queria dar um estilo diferente para as postagens de cada marcador. Exemplo: No marcador1 eu quero por uma imagem(que apare莽a somente nos posts com marcador1) e no marcador2 quero por uma cor de fonte diferente(que apare莽a somente nos posts com marcador2). Voc锚 saberia me ajudar? Seria bacana um post tutorial com esse tema. Tenho certeza que d谩 pra fazer, s贸 n茫o descobri como ainda. Se conseguir me ajudar ficarei muito grata! Obrigada!

    Responder

  10. fiz em um banner slide e deu certo em partes… o banner das imagens em slide some nas outras paginas mas as imagens dele ficam e ocupam a pagina toda uma em baixo da outra como resolver

    Responder

Deixe um coment谩rio

Ao comentar você concorda com nossa Política de Comentários.