MINHA APRESENTAÇAO

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.

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.

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.