Welcome to the blog Hitech Tips

A blog about web and IT. Sharing things I use at work.

Blogger: associar ícones às categorias do post - parte 1/3

Posted by Mr.Editor Monday, February 15, 2010

Este artigo explica como fazer para ter diferentes ícones antes do título

Quem por aqui passa já terá reparado que associado a cada post aparece um ícone e que não é constante. Com efeito, cada conjunto de categorias do blog (labels) está associado a um ícone, o qual é escolhido automaticamente. Assim, quando se cria um post, escolhe-se a categoria para o marcar e plimmmm depois de publicar o respectivo ícone aparece. Mais tarde, se alterar a categoria do post, o ícone mudará em correspondência.

Passo a expôr como implementei esta funcionalidade na template. Dada a extensão do artigo, este será partido em 3 partes:

  1. O problema
  2. Implementação
  3. Juntando as peças

Associar ícones às categorias do post- parte 1/3: O problema

O objectivo

Dizem as regras da boa blogagem, as quais supostamente ajudam a aumentar o número de visitantes, que se deve manter coêrencia no género de conteúdos abordados no blog. Por exemplo, evitar falar dos negócios da política num blog de culinária sob pena disso causar indigestão. A ideia subjacente é que quem vai a um site espera encontrar lá um certo tipo de conteúdos e isso fidelizará o visitante. Pela minha experiência pessoal, sei que assim é. E se não se quiser ter vários blogs para malhar em áreas diferentes conforme a pachorra do momento? Claro que para o visitante poderá ser algo frustrante, daí que optei por facilitar a identificação visual dos conteúdos pelo uso de um ícone que esteja relacionado com a categoria do post. Já agora, na mesma linha da separação da separação de conteúdos, também abordarei noutro artigo a forma de ter um feed por cada categoria.

As limitações do Blogger

Olhado para uma template genérica, vemos que a parte onde as categorias são mostradas é esta (ir a Layout | Edit HTML | Download Full Template e abrir o ficheiro XML descarregado):

<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>


Mais à frente explicarei este pedaço de código mas por agora basta verificar que existe um clico (loop) dentro do qual são listadas as categorias associadas ao post.



Portanto, para ter um ícone diferente para cada post, bastaria olhar para cada categoria e decidir sobre o ícone a usar. Algo assim:



<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
IF categoria = gracinha THEN
usa o ícone da gracinha
END IF
</b:loop>


O problema desta abordagem está no facto de o Blogger não ter o bloco IF ... THEN ... ELSE!



A solução



Como resolver então o problema? O truque que encontrei para contornar este problema foi:




  1. parte do processamento é feito pelo Blogger


  2. a parte restante é feita pelo browser ao receber a página.



Assim, na template do Blogger coloquei comandos para gerar um javascript. Este script é depois interpretado pelo cliente (o browser) para escolher o ícone certo a apresentar.



Na próxima parte deste artigo detalharei a solução implementada. Entretanto, se a curiosidade apertar, experimente ver o código fonte desta página e olhe para o script gerado (procure o texto "var all_labels")


2 comments

  1. Não achei essa parte no seu blog a não ser no texto sobre o assunto e também não vi os tais icones na suas categorias. gostaria de saber sobre a continuação da materia e saber se tem algum exemplo para mostrar com o código em pratica. Preciso criar algo parecido e não sei como posso fazer isso...rs

    Teria como dar uma ajuda?? outra duvida é se isso carrega d+ o blog e se não é proibido pela equipe do blogger.
    Obrigado e fico no aguardo

     
  2. Olá Guilherme

    este post foi escrito num outro blog que tenho e depois coloquei-o aqui para referência. Daí não estarem aqui estes ícones.

    Mas pode ver aqui em funcionamento:

    http://fliscorno.blogspot.com/

    Se quiser mais informações, p.f. mande mail para fliscorno arroba gmail ponto com

    Jorge

     

Post a Comment

Followers