Tutorial: Como fazer categorias personalizadas para blog

Foto: Tumblr

Deu pra perceber que o blog mudou né? Eu sempre penso no que ficara melhor e mais confortável para mim e pra você que está lendo.Bom, estava eu arrumando o layout do blog e vi que as categorias não combinavam com as novas cores, por isso resolvi fazer novos e aproveitar fazer esse tutorial para você  fazer um com a cara do seu blog sem ficar horas procurando na internet algum que combine; Então olhem só:

1- Primeiramente abram o PhotoScape, se você não tiver use o Canva Design que também da.

Bom, as cores que eu vou usar é Azul e cinza.Procure em imagens, círculos ou seja o que for, da cor que deseja.Por exemplo, eu pesquisei "Circulo azul png" (Png é com fundo transparente).E, salve a imagem pequena, quando você pesquisa dessa forma, você não clica nela, salva desse tamanho pra dar certo.

2- Depois pesquise pela imagem que vai ficar em cima desse circulo de acordo com a categoria.Por exemplo, categoria Fotografia vou colocar uma câmera.Esse tipo de imagem você deve procurar em sites sem Direitos Autorais, o meu favorito é o Freepik.Eu pesquisei, "icon câmera" e apareceu vários.Então para cada categoria eu salvei uma imagem, ok?

3- Lembrando que as duas imagens (circulo e a imagem de cima) tem que ser em fundo transparente.Se não for, use esse site para deixar em png.Clique aqui para aprender a fazer isso.

4- Agora, depois de tudo pronto, abra o Photoscape e monte cada uma de suas categorias, escolhendo o circulo azul e depois adicionando uma imagem, assim:
1°

 2°


5- Depois de fazer todas as suas categorias e salvar cada uma (com o fundo transparente) Você vai nesse editor onde deixamos em png e diminuí o tamanho dele (muito grande fica feio no blog, na minha opnião), assim:

5- Agora para colocar no seu blog, vá em Layout > Adicionar um Gadget > HTML/ Java Script cole esse codigo no conteúdo:
<a href="ENDEREÇO DA CATEGORIA" title="TÍTULO DA CATEGORIA"><img src="ENDEREÇO DA IMAGEM" /></a>
Substitua:
-O trecho em azul no Endereço da categoria do seu blog.Exemplo de fotografia
-O trecho em verde é o titulo da categoria. Exemplo "Fotografia"
-O trecho em vermelho coloca a Url da imagem que você copia quando hospeda a imagem.Exemplo 
Cole quantas vezes forem preciso, exemplo eu tenho 12 categorias, vou colar 12x o mesmo código, alterando cada uma delas.

Bom, espero que tenham gostado e ajudado vocês.Se fizerem me conte nos comentários, se tiver alguma duvida comente que respondo todos :D

xoxo