07 abril 2016

Categorias com imagem (fundo de qualquer cor)

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! 

Comente com o Facebook:

18 comentários:

  1. Olá, Larissa!
    Gostei muito do seu post porque é, com toda a certeza, de muita utilidade para as pessoas que, assim como eu, não entendem muito sobre layouts e códigos relacionados ao blog.
    Por ter gostado tanto, vou incluir o seu post no "A Escrita Recomenda", que é um espaço do meu blog onde compartilho com os meus leitores os psots que mais vi e gostei.
    Parabéns!

    Um beijo,
    Blog "A Escrita e Eu"

    ResponderExcluir
    Respostas
    1. Oi Jheniffer, muito obrigada pelo carinho! Me esforço muito aqui no blog com esses tutoriais, e ler comentários assim me animam muito a seguir em frente! E obrigada de coração por me recomendar! Fico muito feliz <3 Beijosss.

      Excluir
  2. Larissa arrasando com esses tutoriaaaaiiiis <3

    ResponderExcluir
  3. MELHOR TUTORIAL DA VIDA! Mais que bem explicado, fácil e versátil. Amei muuito. Obrigada <3
    isabellefelicio.com

    ResponderExcluir
    Respostas
    1. Obrigada pelo comentário, espero que tenha conseguido ♡

      Excluir
  4. Nossa não sei nem o que comentar hahah amei o tutorial, esta de parabéns com o seu trabalho!!
    http://srtame.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que linda haha. Eu que agradeço pelo carinho!

      Excluir
  5. As imagens não estão aparecendo, o que fazer? (:

    ResponderExcluir
    Respostas
    1. Onde você tá hospedando? Será que você tá copiando a url certa? Colocou no lugar certo?

      Excluir
    2. oi, sou eu de novo. sim, sim, está tudo certinho e naaada :c Pode ajudar?

      Excluir
    3. Fala comigo la na página no facebook e me manda o link do seu blog, preciso analisar mais de perto pra ajudar

      Excluir
  6. O meu ficou muito gramde , não consigo diminuir o tamanho olha https://batomnossodecadadiamah.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Você colocou o endereço das imagens certinho? Pelo que vi, não estão com a url certa, da imagem

      Excluir
  7. Oi Flor adorei seu blog. Já to seguindo. Passa la no meu e se gostar me siga também. Beojos
    http://florzinhachique.blogspot.com.br/

    ResponderExcluir
  8. Oi Lari. Esse tutorial ajudou muito! Bjs :D

    ResponderExcluir
  9. Oi, Larissa! Consegui colocar no meu blog e ficou lindo! Brigadinho! Beijinhos!
    www.gisabarone.com.br

    ResponderExcluir

Butlariz • contatobutlariz@gmail.com Feito com ♥ por Lariz Santana / Moonly Design