Categorias do blog em formato de ícones acima do título do post

em 5 de outubro de 2015


Desde que eu comecei a usar no blog os ícones das categorias ao lado dos títulos dos posts chovem pedidos para ensinar como fazer.
É sempre assim, aparece algo novo no blog e os pedidos surgem rapidamente...
Faz meses que venho prometendo, queria ter feito antes mas nem sempre é assim que funciona: falta tempo para o tanto de coisa que quero postar, falta tempo para montar os tutoriais com o meu jeito de explicar. E, claro, nem sempre será possível ensinar.
Mas, atendendo à pedidos, vamos aprender?

Se você não sabe do que eu estou falando, é disso:



Trata-se de algo que vemos muito em blogs Wordpress, e menos comum no Blogger.
Mas é possível sim ter no Blogger, e de modo relativamente simples.
Não é complicado de fazer, mas dá trabalho, então leia o tutorial até o fim, releia para se certificar de haver entendido, e mãos à obra!

Dica da tia Elaine:  faça sempre em um blog de testes antes, um blog que tenha post e marcador, claro. E que seja público.
Só depois faça no seu.
Se fizer direto no blog "oficial" é por sua conta e risco, ok?


Executando o tutorial sem erros: inserindo os marcadores nos posts


Seu blog precisa ter as categorias, ou marcadores, já inseridos nos posts e bem definidos. Sem isso é impossível seguir o tutorial, ok?

Para aprender Como inserir marcadores de forma correta e eficiente em seu blog clique aqui.

Seus posts possuem os marcadores?
Então é hora de selecionar quais as suas categorias mais relevantes, que mais são usadas ou que possuem mais importância.
São essas que você deve escolher para ilustrar.
Podem ser quantas quiser, mas nesse tutorial vou ensinar como colocar 8 categorias; se desejar mais basta acrescentar no código Javascript que passarei adiante.


Preparando os ícones das categorias escolhidas


Também é importante que os ícones que pretende usar  estejam prontos, editados no formato e tamanho desejados e já hospedados porque vamos precisar do endereço http de cada imagem/ícone.

Vamos supor que você vá usar 8 categorias, como no meu exemplo.
Algo do tipo: receitas, looks, maquiagem, moda, livros, filmes, dicas e textos.
Precisa então encontrar ícones que representem essas categorias.
Aqui tem alguns sites que fornecem ícones de boa qualidade, gratuitamente:

Iconfinder
IconArchive
FindIcons

Escolha quais ícones quer, baixe os seus escolhidos, e vamos editar.
Abra qualquer editor de imagem que suporte transparência (Photoshop, Photofiltre, Photoscape, por exemplo) e edite uma imagem com fundo transparente. Para ajudar fiz algumas bases, de presente. Estarão no final do tutorial. Mas você pode fazer as suas, claro.

Essas bases que fiz são circulares, mas pode ser retângulo, quadrado, etc.
Optei pelo círculo, que é como eu uso atualmente.
Daí, nesse círculo-base, é só ir colocando um a um os seus ícones escolhidos e salvando.

Categorias editadas?
Aí é hora de hospedar as imagens.
Faça assim:
Abra rascunho de um post em seu blog, e carregue as imagens das categorias já preparadas.

A seguir clique sobre cada uma das imagens com o botão direito do mouse e clique em Copiar endereço do link (se estiver usando o Chrome).
Esse é o link de sua imagem, é o endereço web dela.
Se preferir pode hospedar em outro lugar; eu uso o Blogger porque é mais seguro e mais prático.


Instalando os códigos no template, fazendo a mágica acontecer


Imagens prontas e hospedadas, vamos finalmente aos códigos!
Serão 3 passos simples, mas precisa de atenção, tá?

Para começar vá ao painel administrativo de seu blog e clique na aba Modelo.
A seguir clique em HTML e dentro da caixa de código que abrir tecle Ctrl+F.
Dentro da barra de busca que expandir digite </head> e tecle Enter para localizar.
ACIMA dessa tag cole este código:


Copiar o código javascript


Salve.

ATENÇÃO!!!
Leia o código!
Ele tem marcado em cores os lugares que  você vai editar.
Olhe o esquema:
Em vermelho é o endereço de seu ícone, aquele que você criou e hospedou;
Em azul é o nome de sua categoria ou marcador, exatamente como ela aparece no seu blog.
Em verde repita o nome exato da categoria, na ordem e exatamente igual colocou no código marcado em azul.


Aplicando estilo


A seguir, dentro da barra de busca digite ]]></b:skin> e tecle Enter.
Acima disso cole este código, que define o estilo de suas categorias:


Copiar o código CSS


Salve.
Essa é a parte que define a aparência, o posicionamento e o tamanho dos ícones.
Edite para se ajustar ao seu template.
Não tem como eu ensinar porque varia de template para template, mas preste atenção aos comandos básicos e você vai conseguir ajustar.
Veja a explicação que deixei em capslock no código!


Calma que ainda não vai aparecer nada, vamos colocar o código que fará a mágica acontecer.
Digite <div class='post-header'> dentro da barra de pesquisa e tecle Enter.
Provavelmente você encontrará 2 ocorrências desse código.
Estamos em busca da segunda ocorrência, tá?
Veja no print:

local para colar o codigo de ativação


Acima disso cole este código de ativação:


Copiar o código de ativação


Salve.
Se você fez tudo certo seus ícones estão aparecendo nas postagens que possuem os marcadores selecionados.
Não deu certo?
Veja as respostas às suas possíveis perguntas:


Perguntas frequentes


1- Fiz tudo certinho e não apareceu nada, o que fiz de errado?
Não sei, impossível eu saber. Recomendo que leia e releia até se certificar de haver entendido, e de que não pulou nenhuma etapa.
Se realmente não deu certo pode ser alguma incompatibilidade de seu template.

2- Quero colocar ao lado do título do post, igual ao seu, como faço?
Edite o código CSS até conseguir ajustar.

3- Quero que os ícones sejam sem fundo redondo, só a imagem, como faço?
Edite a imagem como deseja, sem a base mas sempre no mesmo tamanho para todos os ícones.

4- Quero que apareça mais de uma categoria.
Não. Só aparecerá uma, se o post tiver mais de uma categoria aparecerá apenas uma, em geral por ordem alfabética.

5- Não sei editar imagens, nem usar programas como os que você falou.
Precisa aprender.
Baixe o Photoscape e pesquise na internet como usar.
É muito, muito simples, leve e fácil de usar.

Também pode baixar o Photoshop CS2, que recentemente foi liberado para download gratuito e legalizado no site da Adobe para usuários Windows.
Clique aqui para baixar o Photoshop CS2 gratuitamente.
Daí é só mexer até aprender o básico; existem dezenas de bons tutoriais pela net afora...



Pensa que acabou? Não, tem presentes!
Preparei um pack de ícones já editados pra você.
Para descarregar e usar basta curtir a fanpage do blog, como cortesia, claro.


 Como baixar o pack de ícones e bases

Para fazer o download do arquivo você precisa curtir a fanpage do blog.
Caso não tenha ainda curtido clique aqui:


Na aba Brindes, lá na fanpage, clique na imagem igual à esta:

Clique sobre ela e abrirá a página de download.
Clique no botão verde e faça o download para seu pc.
A seguir descompacte o arquivo.

Dentro da pasta estão as bases em 8 cores diferentes, e 4 cores já editadas, com as categorias dicas, maquiagem, look, textos, livros, cinema, decoração e receitas.
Olha o preview das cores:





Gostou do tutorial?
Acredite, levei uma tarde de domingo inteirinha pra montar, editar e testar.
Ao todo deve ter dado umas 6 horas de trabalho.
Então, ajude o blog e esta blogueira: curta, compartilhe, me ajude a fazer o blog crescer.
Um clique não custa nada pra ti e pra mim é ouro puro!
#agradecida :)

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

16 comentários , comente também!

  1. Incrível como um tutorial desses não tem sequer um comentário dizendo exatamente isso, que é incrível.

    As pessoas andam muito ingratas ou eu é que ando muito chata rsrs

    E a menina agora tá de óculos?? Não digo nada, não vivo sem eles!! Sou a miss magoo, por isso até gostaria de fazer e colocar esses ícones lindinhos, mas como não enxergo o mardito do código, qualquer dia desses cê faz pra mim rsrsr

    beijossssssss

    ResponderExcluir
  2. Muito bom o tutorial! Eu andei loucaaaaa atras dele! Infelismente, testei e não funcionou :(
    Depois vou testar em outro template;

    ResponderExcluir
  3. Eu adoro seus tutorias *-* uso a maioria em meu blog
    dezesseisdiasdepois.blogspot.com
    Eu tava procurando esse a tempos pois o que eu tinha feito n deu certo

    ResponderExcluir
  4. Ele deu certo, mas aparece em cima do blog, em vez de em cima do post . O que eu faço?

    ResponderExcluir
    Respostas
    1. Provavelmente você colou o código de ativação no 1º código que apareceu e o certo é o 2º código igual a este.

      Excluir
  5. Aiiii!!! Amei este tutorial!!! Muito bom!!! Vc me entende!!!! kkkkkk
    Mas testei e não deu certo!!!
    Tentarei de novo no outro blog teste!!!

    ResponderExcluir
  6. Que post bem explicado.
    Eu sou uma "naba" nestas coisas :o

    ResponderExcluir
  7. Sou viciada em seu blog rs, vce sabe bem disso.... me matei aqui umas 5 horas ainda nao consegui deixar como eu quero, mais não vou desistir kkkk

    ResponderExcluir
  8. Ainda não consegui fazer funcionar, acredito ser alguma incompatibilidade. No entanto, acho seu blog show de bola e as dicas fenomenais.
    Parabéns.
    Beijos
    www.estilogisele.com.br

    ResponderExcluir
  9. Arraaaaaaaaasou Elaineee, conseguiii estava muito tempo atras e deu super certo! http://www.erikamarinho.com.br
    Meninas tem q seguir a risca as dicas, e a ordem onde tem os numeros [ 2 ] dentro desses quadrados tem q estar seguida... ameeeeeeeei,criei as minhas imagens no power point <3

    ResponderExcluir
  10. quando eu coloco o na pesquisa e nao achei ele,o que eu faço?

    ResponderExcluir
  11. Elaine, muito obrigada... tenho que mexer no meu blog... Tenho! Vou fazer uns testes e esse tutorial está entre vários seus que favoritei... Precisava dessa reciclada... Estou há horas aqui... várias abas abertas, então para simplificar agradeço por todos os posts aqui... Beijossss

    ResponderExcluir
  12. Boa Noite Elaine, eu gostaria de colocar a categoria acima do título da postagem e centralizada. Poderia me informar em qual parte do código eu altero?

    ResponderExcluir
    Respostas
    1. Gabriela, tem que editar o código CSS. Está especificado nele os campos de edição.
      bjssss

      Excluir
  13. Tentei diversas vezes, em vários blogs de teste e não consegui! =(

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…