Tutorial: Categorias com imagem

Oi gente <3 O tutorial de hoje é um tutorial que eu sempre vejo as pessoas procurarem pelos grupos, que é sobre como colocar categorias com imagens no blog. Mas melhor do que isso: Elas vão ter a cor de fundo que você quiser! Vou te ensinar a mudar a cor pelo código. E também vou ensinar a fazer um ícone preto virar branco.

Antes de começar, lembre-se: Faça o tutorial até o final. Não conseguiu? Tente mais 3x. Respire, faça passo a passo com calma, você vai conseguir.

Escolhendo os Ícones

A primeira coisa que você vai fazer é escolher os ícones que você quer. 
1. Entre no Flaticon. Na barra de pesquisa, você pode escrever o que procura e vai aparecer vários icones. 
2. Quando passar o mouse pelo ícone desejado, vão aparecer dois símbolos: Uns quadradinhos e embaixo o olho. É só clicar no símbolo de cima (quadradinhos) que ele vai ser acrescentado numa lista. Continue fazendo isso até selecionar todos que quer. 
3. Depois é só clicar no botão verde escrito “Download collection” para baixar. Escolha o formato (PNG) e depois o tamanho (64px). E é só baixar. 
4. Clique com o lado direito do mouse na pasta compactada, e clique em “Extrair tudo”. 
5. Crie uma conta no Imgur e faça upload dos ícones para depois pegar os links. (Ou qualquer outro site para hospedar imagens). 
A parte mais chatinha você já fez! Hahaha, o resto é só prestar bastante atenção.

O  Código 

1. Blogger: Vá em Layout. Clique em “Adicionar Gadget” no lugar que deseja e escolha “HTML/Javascript”.
WordPress (org): No painel, clique em Aparência e depois em Widgets, e selecione o Widget texto. 
2. Cole o seguinte código:

<style>

.categorialariz li {
    list-style: none;
    width: 40px;
    float: left;
    margin: 8px;
    border-radius: 360px;
    padding: 12px;
    background-color: #D1C7EC;
}
.categorialariz img {
    width: 100%;
    margin: auto;
    display: block;

}

</style>

<div class="categorialariz">

<li><a href="/search/label/MARCADOR1"><img src="URLDAIMAGEM1" title="Categoria 1" /></a></li>

<li><a href="/search/label/MARCADOR2"><img src="URLDAIMAGEM2" title="Categoria 2" /></a></li>

<li><a href="/search/label/MARCADOR3"><img src="URLDAIMAGEM3" title="Categoria 3" /></a></li>

<li><a href="/search/label/MARCADOR4"><img src="URLDAIMAGEM4" title="Categoria 4" /></a></li>

<li><a href="/search/label/MARCADOR5"><img src="URLDAIMAGEM5" title="Categoria 5" /></a></li>

<li><a href="/search/label/MARCADOR6"><img src="URLDAIMAGEM6" title="Categoria 6" /></a></li>

</div>

3. Em MARCADOR1 você vai colocar o marcador que você usa pra sua categoria. Por exemplo, se na categoria “Livros” você usa o marcador Livros. Então no lugar de MARCADOR1 será Livros. Se você não entendeu o que eu disse, leia o passo 2 desse tutorial de como colocar menu com seus links.

4. Em URLDAIMAGEM você vai pegar o endereço da imagem de cada categoria que você hospedou, e substituir.

5. Em Categoria 1 , é o nome da Categoria.

6. Repita o processo com todos.

Agora você vai adaptar o código:

7.  #D1C7EC – É a cor do fundo, você pode escolher a cor que quiser. Pra ver o código das outras cores, veja essa tabela.

8. 40px – É o tamanho do ícone, aumente ou diminua de acordo com o que você precisa.

Mágica

Se os ícones forem pretos, você pode fazer ficarem brancos colocando o seguinte código antes de </style>:

.categorialariz img {
    -webkit-filter: invert(1);
    filter: invert(1);
}

Ah, e eu vou deixar aqui os ícones que eu usei nas imagens do tutorial, então pra usá-las é só clicar com o lado direito do mouse, e copiar o endereço da imagem!

Espero que tenham gostado e que consigam fazer o tutorial! Caso não consiga ou encontre algum erro, envie um e-mail para duvidasbutlariz@gmail.com. Ah, não esqueça de se cadastrar na newsletter do butlariz e não perder todas as coisas mega legais que rolam aqui!