Categorias em imagens no Blogger

12 de jan de 2015
Acho que esse é um dos tutoriais mais pedidos pelo pessoal que usa Blogger!

Aviso: Serão utilizados 3 códigos nesse tutorial, então será necessário que você saiba pelo menos um pouco de HTML para ajustar o código ao seu layout. Eu tentei fazer com que ficasse bem em todos os layouts, mas é inevitável, cada blog tem um layout diferente e personalizado do seu jeito.
Os códigos
Serão 3 códigos:
Código 1: Projeto - É basicamente o texto que fará o navegador interpretar o código e fazer o tutorial funcionar.
Código 2: Estilo - Será o código que vai definir como a imagem das categorias irá ficar. É esse documento que talvez precisará de adaptações suas para que o tutorial funcione perfeitamente no seu layout.
Código 3: Mãos à obra - É o código que você irá colar para que as imagens apareçam em cima dos posts!
Se você quiser pode clicar aqui para baixar todos os códigos

Não se esqueça de fazer um backup do seu template antes de fazer quaisquer modificações no código. Assim, se algo der errado, você pode recuperá-lo exatamente como estava antes. Modelo » Fazer backup/Restaurar » Fazer download do modelo completo
Código 1
Colar este código ANTES de </head>

<script type='text/javascript'>
function lebel_logo(etiqueta) {
imagenes = new Array();
imagenes[1] = "<img src='http://i.imgur.com/CD9mnLm.png' title='Fotografia'/>"
imagenes[2] = "<img src='http://i.imgur.com/CusDOIa.png' title='Maquiagem'/>"
imagenes[3] = "<img src='http://i.imgur.com/QPHopVK.png' title='Música'/>"
imagenes[4] = "<img src='http://i.imgur.com/ONm05ys.png' title='Filmes e séries'/>"
imagenes[5] = "<img src='http://i.imgur.com/PUv9cTa.png' title='Livros'/>"
imagenes[6] = "<img src='http://i.imgur.com/s2WZn23.png' title='Cabelo'/>"
imagenes[7] = "<img src='http://i.imgur.com/cae6XYV.png' title='Moda'/>"
imagenes[8] = "<img src='http://i.imgur.com/hqeTADg.png' title='Cinema'/>"
imagenes[9] = "<img src='http://i.imgur.com/nIesF1z.png' title='Textos'/>"
imagenes[10] = "<img src='http://i.imgur.com/GABYCFV.png' title='Viagens'/>"
if (etiqueta == "fotografia")
{document.write(imagenes[1]);}
if (etiqueta == "maquiagem")
{document.write(imagenes[2]);}
if (etiqueta == "música")
{document.write(imagenes[3]);}
if (etiqueta == "filmes")
{document.write(imagenes[4]);}
if (etiqueta == "livros")
{document.write(imagenes[5]);}
if (etiqueta == "cabelo")
{document.write(imagenes[6]);}
if (etiqueta == "moda")
{document.write(imagenes[7]);}
if (etiqueta == "cinema")
{document.write(imagenes[8]);}
if (etiqueta == "textos")
{document.write(imagenes[9]);}
if (etiqueta == "viagens")
{document.write(imagenes[10]);}
}
</script>

Entendendo o código:
O código em azul é o nome das tags que você deverá utilizar para que a imagem a que ela está ligada (olhe a numeração) apareça nos posts. Já o código em rosa é a URL das imagens que representam cada tag. Então, para personalizar o código de acordo com as categorias do seu blog, você pode alterar o código em azul e o em rosa.

Clique aqui para conferir todas as cores de categorias disponíveis!
Código 2
Esse código é o que talvez precise de modificação no seu layout.
Colar este código ANTES de ]]></b:skin>

.format-icon {float: left;
position: relative;
left:46%;
padding-right:5px;
padding-bottom: 5px;
margin-top: -4px;
clear:both}

Alteração no seu layout: Para que a imagem não fique grudada no título do seus posts, aperte ctrl+f e procure por .post h1 ou .post h3 ou h3.post-title.
Nessa class você adiciona: margin-top: 22px;
Código 3
Colar este código DEPOIS do PRIMEIRO <div class='post-outer'>

<b:loop values='data:post.labels' var='label'><a class='format-icon' expr:href='data:label.url' rel='tag'> <script type='text/javascript'>lebel_logo("<data:label.name/>");</script></a></b:loop>
Fazendo o script funcionar
Mesmo você fazendo tudo como explicado acima, ainda não será possível ver o efeito funcionando.
Para fazer o efeito do script funcionar, você terá que colocar os marcadores incluídos ao script, ou seja, cada categoria em imagem, ela é divida pelos marcadores destacados em azul no Código, ou seja, se for postar música, coloque o marcador música para ver a imagem nos posts, e assim por diante.

Espero que tenham gostado do tutorial e que ele funcione aí, eu dei os códigos principais, a personalização fica por conta de vocês viu? Alguma sugestão para o próximo tutorial?
48 comentários:
  1. Achei super legal o tutorial,não sei muita coisa de html mas até que entendi bem o que estava na codificação. Vou colocar no meu blog,mas primeiro vou testar no meu blog teste pra não fazer besteira porque mesmo fazendo backup eu ainda fico insegura haha
    Depois conto o resultado ^.^
    Não tenho muitas ideias de tutoriais pra te dar,mas sei que você tem que continuar fazendo viu rs talvez detalhes simples de personalização,no menu ou gadgets.
    Beijos ♥♥

    ResponderExcluir
    Respostas
    1. EBA! Isso se você sente mais segurança assim haha e depois me conta o resultado!
      Pode deixar, vou pensar em algo assim!
      Beijos

      Excluir
  2. Vou guardar para modificar depois no meu lay, ja esta a procura dele tuto a muito tempo. bjs

    www.garotadosuburbio.com

    ResponderExcluir
    Respostas
    1. Que legal Susany, vai ficar lindo!
      Beijos

      Excluir
  3. Caaaa!
    Adorei (e mandei o link para uma amiga!). Assim que estiver com tempo, vou tentar! :D

    Obrigada por compartilhar os seus conhecimentos conosco! ;)

    Um beijo,

    Algumas Observações
    Nosso Clube do Livro
    Teoria, Prática e Aprendizado

    ResponderExcluir
    Respostas
    1. EBAA!
      Leitora que indica links para amigas são <3
      Tenta sim, e de nada!
      Beijos

      Excluir
  4. Gente que tutorial fantástico! Adorei Carla! Grata por disponibilizar!
    Ah! Não posso deixar de dizer que eu blog é uma graça!!! Lindo demais!


    Beijinhos!
    http://www.pensamentosvalemouro.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada Vanessa, e imagina, sempre que puder vou estar disponibilizando outras coisinhas pra vocês <3

      Fico feliz que gosta dele :D

      Beijos

      Excluir
  5. Carla salvando vidas com esse tutorial lindo <3
    Eu sempre quis saber como fazer essa belezura, parabéns pelo seu talento!

    Você é uma das minhas inspirações, sabia!
    Continue sempre assim!

    Beijos da Thay :*

    ResponderExcluir
    Respostas
    1. <3 <3
      Obrigada Thay!

      Sua linda, obrigada de coração pelo carinho, pode deixar!

      Beijinhos

      Excluir
  6. Amei o tutorial! Você sabe se tem como colocar dois marcadores na postagem e só aparecer um ícone no topo dela? .-. Obrigada desde já!

    ResponderExcluir
    Respostas
    1. Fico feliz que gostou!
      Tem sim, desde que não tenha uma marcador determinado pra ela ex: você pode colocar os marcadores para um filme:
      Romance, filmes (com imagem no código), Drama e o único marcador que vai aparecer será o da palavra filmes.

      Beijos

      Excluir
  7. adorei, carla! testei em um blog fechado, porém as imagens não ficaram centralizadas, permanecem alinhadas à esquerda. seria algum código no próprio html do meu layout impedindo o posicionamento da imagem? :)
    bjs!

    ResponderExcluir
    Respostas
    1. Provavelmente Bia! Esse código tem que ser personalizado de acordo com o seu layout, no meu ele fica perfeito, já no seu outros elementos podem interferir!

      Beijos

      Excluir
  8. Super amei,eu estava realmente procurando,este tutorial!
    Será que tem como mantermos um contato?Estou começando com um blog agora e tenho varias duvidas.
    O email do blog é paraisofashion.16@gmail.com.
    Muito obrigada!
    Desde já

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha de ajudado!
      Claro <3 espero poder ajudar
      Beijos

      Excluir
    2. Olá de novo,eu fiz o tutorial e instalou e tudo,Só que ele não fica no meio certinho. Tem como me ajudar,porque já tentei mexer nesse código todo e nada.Tentei no Inspecionar elemento no meu navegador e tudo funcionou perfeitamente,mais no html não. Me ajude

      Excluir
  9. Adorei Carla! Estou fazendo meu blog e estou adorando as dicas do seu rs! Mas os meus estão ficando abaixo da data do post e alinhados a esquerda, onde eu posso mudar isso? Amo seu blog, e indiquei para varias amigas!

    ResponderExcluir
    Respostas
    1. Fico feliz em te ajudar mari <3 Mari, isso varia muito de layout pra layout, eu não tenho como cer exata, esse tutorial não funciona pra todo mundo, você tem que ter um pouco mais de conhecimento e HTML pra dar certinho!
      Beijos e obrigada por ter indicado!!

      Excluir
  10. Ameeei o post, estava LOUCA por este tutorial, obrigada por disponibilizar <3
    http://blogbeatrizduarte.blogspot.com.br/

    ResponderExcluir
  11. Ameeeei,estava louca atrás desse tutorial e não achava por nada,e quando achava não funcionava de jeito nenhum!! Só tenho uma dúvida: A imagem ficou a esquerda,eu queria centraliza-la como faço? Aguardo resposta,beijos.

    Blog Vaidade Da Lary

    ResponderExcluir
    Respostas
    1. No código 2, tente colocar no lugar de left, center <3

      beijos :D E fico feliz que gostou!

      Excluir
  12. Parabéns pelo tutorial, eu estava a seculos procurando, mas NUNCA encontrava....

    Ainda estou montando o layout do meu blog, mas assim que terminar te mandarei o link para você avalir!!

    ResponderExcluir
    Respostas
    1. Obrigada, e pode me mostrar assim que irei avaliar haha <3

      Beijos e obrigada pelo comentário!

      Excluir
  13. Anônimo24.6.15

    No meu não apareceu nada :(

    ResponderExcluir
    Respostas
    1. Que pena Anônimo :(
      Infelizmente não tenho como fazer um tuto que funcione em todos os layouts :(

      Excluir
  14. No meu não deu certo também :(

    ResponderExcluir
    Respostas
    1. Que pena :(
      Foi como disse nos outros comentários, tenta dar uma melhorada no código, adaptando-o para o seu layout!
      Beijos

      Excluir
  15. O meu também não apareceu, mas sempre encaixo em outro lugar e vai, Só qe acho qe a data e esse marcardor encima vai ficar exagerado, tem como fazer um tutorial de como deixar a data abaixo do titulo?

    By~ Sweet Magic Kissus!

    ResponderExcluir
    Respostas
    1. Júuh, obrigada pelo comentário!
      Eu ando sem tempo para fazer isso, então dei uma pesquisada e achei isso: http://apaixonadosporhtml.blogspot.com.br/2013/03/1-post-tutorial-data-embaixo-do-titulo.html

      Espero que funcione!

      beijoos

      Excluir
  16. fiz tudo certinho e não apareceu nada no blog :( . Porque sera? não entendi aquela parte do post explicando como faz pra funcionar. beijosss

    ResponderExcluir
    Respostas
    1. Os nomes tem que estar iguais. Tipo, se você colocou:

      imagenes[1] = .... title='Fotografia'/>"

      e

      if (etiqueta == "fotografia")
      {document.write(imagenes[1]);}

      esses dois "fotografia" tem que ser igual ao do seu marcador/tag do blog. Se em seu blog estiver fotografias ou fotos, não irá funcionar. O nome no código tem que ficar ou os dois "fotografias" ou os dois "fotos". Resumindo, igual ao marcador do seu blog.

      Espero ter ajudado!

      Excluir
    2. Polyne, pelo visto já responderam sua dúvida haha
      Beijos e obrigada Phanny Teen!

      Excluir
  17. Muuuito obrigada!!! Há tempos tenho vontade e venho tentando colocar no meu blog mas nunca tinha conseguido até encontrar o seu tutorial.

    Fique com Deus :*

    ResponderExcluir
    Respostas
    1. De nadaa <3
      Fico muito feliz em ter te ajudado, de verdade!

      Beijos e amém!

      Excluir
  18. Não consegui msm e procurei tanto este tutorial e achei vc...
    me ajuda please, vc copia e cola todo aquele código tipo ex:

    if (etiqueta == "fotografia")
    {document.write(imagenes[1]);}

    dentro do campo escrever post?

    ResponderExcluir
    Respostas
    1. Não talita, todo esse código deve ser copiado e colado no próprio HTML, antes de
      Entre na page do blogger, clique em modelo >> Editar HTML e procure por para colocar o código ANTES.

      -obs.: retirar os asteriscos
      Beijos e espero ter esclarecido sua dúvida

      Excluir
  19. Ameei o post, me ajudou muito, mas como eu faço pra centralizar essas as imagens? :( :/

    ResponderExcluir
    Respostas
    1. OI Carol! Fico feliz que gostou! Depende do seu código essa centralização :(

      Excluir
  20. Oi carla, tudo bem? Então, qual modelo do blogger ou tema base você usa?

    ResponderExcluir
    Respostas
    1. Olá Stephanie!Tudo que aprendi foi aqui: http://www.floquetando.com/search/label/Blogger
      Beijos

      Excluir
  21. OI Carla, teria como me falar como colocar a imagem no final do título - lado direito, pois ele no meio fica bem em cima do título das minhas postagens.
    Agradeço. :)

    ResponderExcluir
    Respostas
    1. E quando os posts tem duas categorias, ficam uma imagem embaixo da outra, tudo em cima do titulo - o cobrindo.

      Excluir
    2. Olá Marina! Desculpe o atraso em responder seus comentários haha
      Para alterar a posição, você irá configurar o CÓDIGO 2 novamente ok?
      E quanto a duas categorias, tenta configurar nesse mesmo código!
      Espero que consiga!
      Beijos

      Excluir
  22. Oi o/
    Eu ameeiiii seu post, more!
    Procurei a internet inteira até achar vc aq ;-;
    Maasss
    Eu geralmente coloco umas três, quatro tags (uso Blogger)
    Aí, fica tudo uma em baixo da outra, e eu queria que aparecesse só uma, entende?
    Confere aqui o erro:
    http://newblogtotryokay.blogspot.com.br/

    Tem jeito de fazer aparecer só uma tag, tipo, a primeira que foi escrita?
    (nesse caso, a tag apps)

    Queria que ficasse como nesse blog:
    http://www.bloguntilwedie.com.br/

    Help? ;-;

    Ah, aliás, amei seu blog ^^

    Aq o meu
    (divulgo mesmo, porque sim)

    http://smbelizario.blogspot.com.br/

    Bjks e agradeço desde já ;P

    ResponderExcluir
  23. Nossa amei o seu post e o seu blog me ajudou muito
    http://blogfalagabi.blogspot.com/

    ResponderExcluir
  24. Adorei, mas o meu está aparecendo metade por trás da área da postagem ao invés de aparecer na frente, como o seu! O que pode ser?

    ResponderExcluir

 
Todos os direitos reservados © - Tecnologia do Blogger Layout e desenvolvimento por Carla Vieira · Ilustração por Laura Melo