Uma forma de dar mais destaque aos Marcadores é exibi-los como imagens em vez de texto.
É isso o que você aprenderá a fazer neste artigo.
Introdução
Os Marcadores são muito importantes para todas as postagens do seu blog.
Eles permitem a divisão das postagens por assunto, facilitando ao seu leitor encontrar outros artigos similares.
Já escrevi um artigo inteiro falando somente sobre eles: Utilizando corretamente Marcadores no Blogger.
Eles são exibidos sempre como links de texto, normalmente no início ou final de suas postagens.
Aqui no Gerenciando Blog, optei por mostrá-los no início da postagem, logo abaixo do título:
Em uma sugestão deixada em meu UserVoice, uma leitora perguntou se seria possível trocar esses textos por imagens.
Gostei da ideia! Além de dar um visual diferente à postagem, ainda pode chamar mais a atenção do leitor.
Consegui dar uma solução para o caso, e abaixo está como ela ficou com o template “Simples” do Blogger, que pode ser viste em meu blog de testes.
Quer fazer isso também em seu blog? Basta seguir os próximos passos!
Passo 1 – Utilize Marcadores em todas as suas postagens
Para este tutorial funcionar corretamente, o primeiro passo é efetivamente utilizar os marcadores em suas postagens.
Se você tem dúvidas sobre o assunto, leia atentamente o artigo Utilizando corretamente Marcadores no Blogger.
Recentemente, o Dicas Blogger também publicou um artigo muito interessante, mostrando como corrigir os Marcadores de diversas postagens de uma vez.
Ele está em Como inserir, editar e excluir marcadores no Blogger.
Passo 2 – Garanta que os marcadores estejam sendo exibidos
Você vê os marcadores em suas postagens?
Eles não estão na posição onde você gostaria?
Se você respondeu “Não” a alguma dessas perguntas, não se preocupe: é uma questão simples de resolver.
Veja no artigo Defina o que Será Mostrado com seus Artigos como acessar a área onde você deve marcar a caixa “Marcadores” e poderá arrastá-la para a posição onde eles devem aparecer.
Passo 3 – Crie uma imagem para cada marcador que você possuir
Este é o passo mais trabalhoso do tutorial.
Você precisará criar uma imagem para cada um dos marcadores que você utilizar em seus artigos.
É necessário ter imagens para TODOS os seus marcadores, caso contrário haverá erro ao tentar exibir aqueles que não as tenham.
Você pode tentar encontrar imagens no Google Imagens ou em sites de imagens grátis e editá-las para ficar nas dimensões corretas.
Caso não saiba como fazer isso, o artigo Como Editar Imagens para seu Blog poderá ser útil.
Alguns pontos importantes a observar:
1. Crie todas as imagens com o mesmo tamanho.
2. Já as crie com o tamanho que você as exibirá em seu blog. Até é possível redimensioná-las durante a exibição, mas não é um procedimento recomendado.
3. É obrigatório deixar a imagem com o nome do marcador. Por exemplo: se você tem um marcador chamado “Cabelos”, crie uma imagem chamada “Cabelos.jpg” para ele. É necessário respeitar inclusive o mesmo uso de maiúsculas e minúsculas no nome do arquivo.
4. Também é obrigatório que todas os arquivos possuam a mesma extensão (todos sejam PNG, JPG ou GIF).
Passo 4 – Hospede as imagens que você criou
Para poder utilizar as imagens que você criou no passo anterior, você precisa “hospedá-las”, ou seja, disponibilizá-la em um site para que estejam disponíveis online (como, por exemplo, a imagem https://sites.google.com/site/gerenciandoblog/arquivos/blogger.png. Reforçando: não é suficiente que a imagem esteja em seu computador, ela precisa estar em algum site.
Além disso, para que seja possível seguir o tutorial da forma mostrada aqui, é necessário que você tenha controle sobre o caminho e nome que o arquivo terá após fazer o upload.
Entre os serviços grátis que conheço, os que têm essa característica são os mostrados nos artigos abaixo:
- Como usar o Google Sites para hospedar arquivos do seu blog – Foi o serviço que utilizei
- Webs, ótimo site para hospedar seus arquivos
Como resultado deste passo, você terá todas as imagens hospedadas no mesmo caminho, com a mesma extensão. Em meu caso, tenho as seguintes imagens:
- https://sites.google.com/site/gerenciandoblog/arquivos/seo.png
- https://sites.google.com/site/gerenciandoblog/arquivos/blogger.png
- https://sites.google.com/site/gerenciandoblog/arquivos/WordPress.png
Observe em seu caso os trechos destacados em vermelho. Eles serão muito importantes para o próximo passo.
Passo 5 – Altere o HTML do seu template
O último passo é alterar o HTML do seu template, para colocar o código que você criou no item anterior.
Caso você não saiba como fazer a edição, sugiro a leitura do artigo Como editar o HTML de seu template no Blogger.
A alteração é bem simples. Localize em seu template o trecho mostrado abaixo:
<b:if cond=’data:post.labels’>
<data:postLabelsLabel/>
<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 != "true"’>,</b:if> </b:loop>
</b:if>
Substitua a linha marcada em vermelho pela abaixo, marcada em azul.
Note que você deve adaptar os trechos em roxo de acordo com o local onde você hospedou seus arquivos a extensão que utilizou.
<b:if cond=’data:post.labels’>
<data:postLabelsLabel/>
<b:loop values=’data:post.labels’ var=’label’>
<a expr:href=’data:label.url’ rel=’tag’><img expr:src=’"https://sites.google.com/site/gerenciandoblog/arquivos/" + data:label.name + ".png"’ expr:title=’data:label.name’ /></a> </b:loop>
</b:if>
Conclusão
Pronto!
Após seguir todos os passos, as postagens do seu blog passarão a mostrar os marcadores como imagens em vez de textos.
Espero que vocês tenham gostado da ideia!
Eu achei bem interessante e com possibilidade de ser aplicada em alguns blogs para dar um efeito diferenciado nos marcadores.
Sua opinião será muito bem vinda nos comentários!
Além disso, faço um convite especial desta vez: se você aplicar o recurso ao seu blog, sinta-se à vontade para deixar um link no comentário para mostrar como ele ficou.
