Dominio: gerenciandoblog.com.br
Chave: 00e39a4dc6309327334fa422703bddd1e83c509f
Hora do cache: 1487164464
Vida do cache: 1488460460
Status: 1
Mensagem: Licença válida
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Hospedagem - 728 x 90

Blogger layout

Como mostrar os Marcadores como imagens no Blogger

Como mostrar os Marcadores como imagens no BloggerNo Blogger, os Marcadores (ou Categorias) são exibidos nas postagens como links de texto, permitindo que o leitor visualize outras postagens sobre esse mesmo assunto.

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:

Marcadores no Blogger

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.

Marcadores como imagens no Blogger

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 resultado deste passo, você terá todas as imagens hospedadas no mesmo caminho, com a mesma extensão. Em meu caso, tenho as seguintes imagens:

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 != &quot;true&quot;’>,</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=’&quot;https://sites.google.com/site/gerenciandoblog/arquivos/&quot; + data:label.name + &quot;.png&quot;’ 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.

Como mostrar os Marcadores como imagens no Blogger
5 (100%) 2 votes


De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Sobre o autor | Website

Especialista em Marketing Digital, presta Consultoria e auxilia diversos clientes. Amante por blogs, é responsável pela administração dos blogs Afiliados na web, Gerenciando Blog e Mundo Blogger.

29 Comentários

  1. Sissym Mascarenhas disse:

    Adelson,

    Estou compartilhando na rede para outras pessoas poderem aprender tambem.

    Bjs

  2. Thomas disse:

    Muito bom Adelson!

    Com certeza muita gente vai gostar desse artigo, parabéns! E obrigado a Sissym Mascarenhas que compartilhou o link.

    • Adriano Luz disse:

      Olá, Thomas!

      Que ótimo saber que você gostou! E fico feliz em ver que chegou aqui através da divulgação feita pela Sissym!

      Um abraço!

  3. Robson Dombrosky disse:

    Adelson, uso um método que considero mais simples de aplicar pois não é necessário mexer no HTML do template e também mais eficiente, uma vez que não é necessário inserir imagens em todos os marcadores do blog, apenas naqueles que você desejar. Funciona assim: LAYOUT – INSERIR UM GADGET – LISTA. Aí, no campo de cada item, basta inserir um link de imagem clicável, do tipo: a href="link do marcador" img src="url da imagem correspondente"/a. O resultado pode ser visto no meu blog http://www.viajenaimagem.com na coluna da direira, na seção que chamei de "VIAGENS PUBLICADAS"

    • Adriano Luz disse:

      Olá, Robson!

      Obrigado por compartilhar o seu método! Mas, tratam-se de recursos diferentes: o que você fez em seu blog foi criar atalhos na barra lateral para que seus leitores possam acessar seus principais marcadores – e é uma boa ideia.

      Mas, o que este artigo mostra é como mostrar imagens no lugar dos marcadores dentro das próprias postagens. Veja em meu blog de testes que o resultado é diferente. Até onde sei, não há outra forma para fazer isso sem alterar o HTML.

      Um abraço!

    • Edson Neto disse:

      Gostei da ideia!

    • Adriano Luz disse:

      Olá, Edson!

      Agora fiquei na dúvida se você gostou da dica mostrada no artigo ou da sugestão do Robson. rs

      Em todo caso, seja bem vindo!

      Um abraço!

    • Willian Ferreira disse:

      Olá Adelson,

      Passei por aqui há alguns meses e me inspirei para fazer os botões de marcadores na barra lateral – como o Robson fez. Ficou perfeito. Por um descuido meu, os botões foram deletados e a minha barra, agora, está totalmente branca. Não consigo colocar as imagens do Google Sites nem colocar um link válido de jeito nenhum. Pra ajudar, o link da imagem que fiz o upload no Google Sites tá bem estranho – algo como "https://fb711d09-a-62cb3a1a-s-sites.googlegroups.com/site/blogsantazona&quot;, com toda essa nomenclatura antes dos "site/nome_do_user".

      Lembro também que, do jeito que estava, eu conseguia colocar até quatro imagens pequenas (de 50×50, já que parece que a limitação de largura da barra lateral é de 200px) lado a lado.

      Você poderia ensinar como faço isso?

      Desde já grato,

    • Adriano Luz disse:

      Olá, Willian!

      A forma mais simples para fazer isso é criar as imagens separadamente e fazer o upload delas em qualquer serviço de hospedagem de imagens. Até o Google Sites pode ser útil para isso. Depois, basta colocar em seu blog o endereço dessas imagens, com links para seus marcadores.

      Um abraço!

  4. Marcela Melo disse:

    Muito interessante isso de colocar imagens nos marcadores.
    afinal uma imagem fala mais que palavras e chama mais atenção. Além de deixar mais interativo.
    gostei da dica… em breve irei aplicar.

    http://mmelofazminhacabeca.blogspot.com.br/

    • Adriano Luz disse:

      Olá, Marcela!

      Que ótimo saber que você gostou!

      Tomara que ela dê um bom resultado em seu blog! Convido-a a voltar aqui e deixar um novo comentário após fazer isso.

      Um abraço!

  5. Panorâmica Social disse:

    Olá Adelson!
    Gostei muito dessa ideia e resolvi aplicar, e o resultado ficou excelente!!

    Criei imagens na forma de uma etiqueta vermelha, cada uma com o nome de uma determinada categoria, para aparecer somente nas páginas internas, no final das postagens. Fiquei muito satisfeito com o resultado. Deu trabalho mas valeu a pena (rs). Valeu pela dica!

    Deixo o link para quem quiser conferir o resultado abaixo:
    Panorâmica Social

    • Adriano Luz disse:

      Olá!

      Fico feliz em saber que você gostou e até já aplicou em seu blog!

      Como você queria apenas colocar uma imagem de fundo nos Marcadores, até seria possível fazer de uma forma diferente, com alterações em CSS. Mas, não seria possível fazer o que você fez, por exemplo, com seu marcador "Socialismo e Capitalismo".

      Gostei do resultado! Torço para que os novos marcadores chamem a atenção do seu leitor!

      Um abraço!

  6. JOSE DAYMOM disse:

    Este blogger quebra aquele mito que só quem tem wodpress domina o tráfego, ou seja pra ter sucesso na internet como meta blog todo vai depender de seu conteúdo, por exemplo, fazia tempo que estava pesquisando na língua inglesa "Como mostrar os Marcadores como imagens no Blogger", e não tinha encontrado ainda, a maioria do metas blogs do Brasil são relaxado, o gerenciando blog é um exemplo de sucesso, nunca vi um cara tão simpático e prestativo como o Adelson Smania, muito boa suas dicas, eu tinha milhares de site de metas blogs, mas depois que conheci o Gerenciando Blog mudei totalmente a minha visão, aqui estou aprendendo muita coisas, e o melhor é dicas de qualidade grátis, um conteúdo desse merece todo mérito, parabéns!

    • Adriano Luz disse:

      Olá, José!

      Muito obrigado por todos os seus elogios! E eu faço questão de sempre ressaltar que é possível ter um ótimo blog no Blogger. Vale muito mais quem está por trás do blog do que a plataforma em si.

      Um abraço!

  7. Fabio Alves disse:

    interessante se a imagem for bem intuitiva de fácil entendimento. abraço

  8. Fernanda Maria disse:

    Adelson,
    Eu quero muito fazer isso mas o problema é que tenho muitos marcadores e vi num blog que tinha sim os marcadores em forma de imagem maas do lado tinha o menu "veja mais" e dai clicava e via os outros marcadores, tem como fazer isso, sabe como eu faço?
    A sim, o Blogger a tempos apesar de marcar para ser notificada das respostas ele não avisa, não manda e-mail nada…

  9. Fernanda Maria disse:

    Aqui ó Adelson esse link mostra mais ou menos o que eu quero, quero que apareça o menu e as imagens tal como vi num blog tipo "veja mais".
    http://blogsdesucessos.blogspot.com.br/2012/10/marcadores-forma-menu-suspenso-blog.html

    • Adriano Luz disse:

      Olá, Fernanda!

      Infelizmente, não imagino como fazer isso. Já vi também marcadores no formato de menu suspenso, mas nunca com imagens neles.

      Sinto não poder ajudar.

      Um abraço!

  10. Antônio Ribeiro disse:

    Olá Adelson!!!

    Gostei muito desse artigo. Muito útil. Se eu não estou enganado, baixei um template com essa "função", digamos assim.

    Eu tenho um blog de fã clube de um artista e estava pensando em criar uma página com o título "O Cantinho do Fã" onde teria a discrição da página e as postagens de um determinado marcador. Seria possível?

    Abraço!

  11. Paola Fernandes disse:

    Mas você deu o exemplo de como mudar apenas um marcador, como posso mudar todos. Pois ali no link da imagem, você colocou apenas de uma. Como fazer isso com todas as imagens???

  12. dicas da brasileira disse:

    Deu um BUG no blog nada legal, então preferi não arriscar… Adelson você pode me ajudar ?

  13. Thássila Stabile disse:

    Eu tenho uma duvida! Pra eu colocar todas as imagens eu preciso repetir o código?

  14. Giulia Christie disse:

    Olá Adelson! Faz algum tempo que procuro este tutorial e você o fez de forma muito simples! Aprecio muito o seu trabalho <3
    Porém, ainda me resta uma dúvida: Eu queria usar as imagens para dizer a qual "Categoria" o post pertence, mas os outros marcadores secundários eu exporia em forma de palavra mesmo. Há alguma que eu possa usar para corrigir o problema que tenho agora? Porque você mesmo nos alertou para ter imagens para TODOS os marcadores, senão haveriam erros de exibição. Por favor, se souber de alguma maneira de "excluir" esse efeito para os marcadores que não tiverem uma imagem, agradeço. Mas desde já, agradeço muito mesmo pelo tutorial. Você é incrível!

  15. Lucirlio rodrigues e silva disse:

    Muito obrigado, post bastante esclarecedor, era exatamente o que eu precisava. 😀

  16. Almir (Panorâmica Social) disse:

    Olá.

    Já usei esse tutorial no passado perfeitamente, e agora gostaria de usá-lo de novo, mas desde que vocês modernizaram o template, a postagem foi prejudicada.
    Isso porque o artigo falam em trechos coloridos e o template de vocês ficou monocromático.
    Será que poderiam dar um jeito nisso, destacando as cores originais?

    Grande abraço.

    • Adriano Luz disse:

      Ola Almir, tudo bem?

      Realmente tiveram alguns posts que foram afetados quando fizemos a migração.

      Mas quais cores se refere? Olhei o post novamente e aparentemente esta integro…

Para enviar seu comentário, preencha os campos abaixo:

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.
Quer aprender como R$173.571,73 como Afiliado em 4 meses?Quero Assistir o Vídeo!