Menu de categorias com ícones e efeito hover - * Blog Elaine Gaspareto *

Menu de categorias com ícones e efeito hover

em 21/11/2017

Oi, gente!
Há, aqui no blog, uma infinidade de menus, dos mais variados tipos. Veja:

Menus variados para blog- como instalar e configurar

Mas me dei conta de que não havia nenhum tutorial mostrando como ter um menu de imagens. Assim:

Demonstração do tutorial

Viu que legal?
Ele pode ser usado abaixo do cabeçalho como em meu exemplo, abaixo do menu de navegação, no rodapé do blog... basta usar a imaginação!
E pode ser usado em templates responsivos pois os ícones se adaptarão ao espaço no qual estiverem.
Então o tutorial de hoje será esse. Vamos lá?


Como colocar um menu com imagens no blog


Para começar você precisa definir quais categorias de seu blog deseja exibir no menu. Isso é importante porque cada categoria será representada por um ícone.
Feito isso o passo seguinte é selecionar as imagens que deseja usar para "ilustrar" essas categorias.
Pode ser qualquer imagem que queira, desde que tenha fundo transparente.
Para simplificar o tutorial vou indicar um site de onde baixo a maioria das imagens que uso para compor esse tipo de menu: Flaticon

A vantagem desse site é que ele permite baixar as imagens já em png com fundo transparente, dá pra escolher a cor de cada ícone, o tamanho do ícone e a pesquisa por imagens funciona muito bem. E tem uma imensa variedade pra gente escolher.

Então, dica dada, é hora de trabalhar.
Para exemplificar eu escolhi compor meu menu com 8 imagens e defini as categorias que quero mostrar: Decoração, Dicas para blogs,Livros e resenhas, Receitas, Monetização, Cronicas, Pessoalidades e Mãe de cachorro.

Aí fui ao Flaticon e escolhi imagens que representem aquilo que quero mostrar. Selecionei as imagens em 2 cores: uma preta e outra colorida porque eu quero dar efeito hover ao passar o mouse nos ícones do menu.

Na sequência eu abri meu Photoscape e carreguei uma base transparente, na medida de 430px de largura por 100px de altura.
Nessa base eu alinhei cada imagem que selecionei anteriormente no Flaticon.
Assim:



Percebe o que eu fiz?
Alinhei meus ícones coloridos acima e os pretos embaixo, bem certinhos um embaixo do outro, separados pela mesma distância.
Tem que ser assim, tá?

Imagem pronta?
Então é preciso hospeda-la.
Faça um post de rascunho no blog, carregue a imagem e deixe-a em Tamanho original.
Pare o mouse sobre ela, clique com o botão direito do mouse e copie o endereço do link.
Essa é a url de sua imagem; é assim que eu hospedo imagens no próprio Blogger.

Agora vamos inserir o código no seu template.
Copie o código necessário:


Copiar o código


Vá até seu painel e clique em Layout.
A seguir clique em Adicionar um gadget e escolha a opção HTML/JAVASCRIPT.
Dentro da caixa que expandir cole o código que pedi para abrir.
Faça as alterações necessárias: coloque o endereço de sua imagem-base no local indicado, insira os links nos locais indicados (LINK) e coloque o nome de cada categoria no local indicado (Nome aqui).
Troque as cores e a fonte se desejar (deixei sinalizado no código) e depois de tudo pronto, salve.
Arraste para onde deseja que fique e salve a alteração do Layout.
E está pronto!


Dicas extras:

✔ Ao procurar os ícones no site Flaticon pesquise usando palavras em inglês, tá? O site não retorna termos em português.
✔ Eu escolhi imagens com 32px de tamanho. Pode ser maior ou menor, mas esse tamanho fica bom, em minha opinião. Se usar imagens maiores precisará ajustar as posições de background do menu.
No meu exemplo dá certinho, mas caso queira realizar testes essas alterações de background são feitas na parte do código que começa com:

.menuCategorias .a .ic{background-position: -1px -5px;}
.menuCategorias .a:hover .ic{background-position: 1px -55px;}

Aí demanda conhecimento em html e css mas se não quiser esquentar a cabeça use minha base como guia, e só troque os ícones pelos que desejar.
Falou, querido leitor?


Brinde para você


Para facilitar sua vida selecionei um pack de ícones e acrescentei a base transparente.
Faça o download do pack de ícones clicando no link abaixo:



Salve em seu computador, descompacte a pasta e use como expliquei no tutorial.
E para não restar dúvidas de como criar a sua imagem-base gravei uma explicação bem curtinha em vídeo.
aperta o play:


Enjoy!
9 comentários via Blogger
comentários via Facebook

9 comentários:

  1. Lindo trabalho, agradeço muito pelas dicas maravilhosas.
    Tem ajudado muito.
    Obrigada mais uma vez.
    Sucesso e fique com Deus.

    ResponderExcluir
  2. Não consegui selecionar os seus icones de tras da sua base para remover e deixar os meus icones

    ResponderExcluir
    Respostas
    1. Silvania, tem que excluir a base depois de adicionar os seus ícones, mas antes de juntar foto+objetos.

      Excluir
  3. Oi Elaine
    Consegui colocar no blog,demorei um pouquinho mas deu certo.Obrigada por dividir seu conhecimento,não me atrevo a mexer no modelo do blog,quando você posta um tutorial que vem em forma de Gadget,assim prática mente pronto ai fica fácil.
    Beijos

    ResponderExcluir
    Respostas
    1. Maria, que bom!!!
      Eu fui lá ver, ficou muito fofo! Parabéns!!!!
      Sim, demora, mas é tão bom quando a gente consegue, né?
      bjssss

      Excluir
  4. Como eu faço para que eles fiquem centralizado com menos imagem?

    ResponderExcluir
    Respostas
    1. Silvania, para retirar imagens é só não coloca-la na guia. Ele vai centralizar automaticamente.
      eu vi em seu blog, deu certo?

      Excluir
  5. Deu certo! Obrigada pelas dicas maravilhosas. Beijão

    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…



No Instagram