Menu de redes sociais com efeito hover - * Blog Elaine Gaspareto *

Menu de redes sociais com efeito hover

em 10/08/2016

menu de ícones de redes sociais com efeito hover

Já faz tempo que eu uso esse menu de ícones de redes sociais nos blogs que personalizo.
Ele é prático, fica lindo, é bem personalizável e usa apenas CSS para ser feito. Bem levinho e fácil de editar.
Não sabe do que eu tô falando?
Olha:

Demonstração do tutorial

Vamos aprender?

Para começar você precisa ter instalada em seu template a fonte especial que gera os ícones.
Faça assim: acesse o painel de seu blog e clique na aba Modelo.
A seguir clique em Editar HTML e dentro da caixa de código que abrir tecle Ctrl+F.
Na barra de busca que aparecer digite <head> e tecle Enter para localizar.
Abaixo de <head> cole este código:




Salve.
A fonte que gera os ícones está instalada.

Agora, ainda no painel do blog, clique em Layout.
Escolha Adicionar um gadget e na janela de opções selecione HTML/JAVASCRIPT.
Dentro da caixinha cole o seguinte código:


Copiar o código


Agora faça as edições necessárias:

1- Onde está LINK DO PERFIL coloque, claro, o endereço de seu perfil na rede social correspondente.
Faça isso com todas as redes que for inserir.

2- Onde está o nome da rede social mantenha, é importante. E sobretudo mantenha o trecho que diz <i class="fa fa-facebook" pois é esse nome da rede social (no caso, facebook, escrito exatamente assim) que vai fazer aparecer os ícones.
Para ver todos os ícones disponíveis visite o site do desenvolvedor do recurso.


3- Se quiser acrescentar mais redes sociais além das 4 que forneci basta copiar essa linha de código:



E coloca-la ANTES do fechamento da div </ul>.


4- Cores são alteradas no código hexadecimal precedido de #.
O tamanho dos ícones é definido no estilo.
Confira o gráfico:

width: 38px; -largura
height: 38px; -altura
line-height: 38px; -altura do texto
background: #E8657B;  -cor de fundo
text-align: center; -alinhamento do ícone
color: #fff; -cor do ícone
font-size: 26px; -tamanho da fonte do ícone


5- Depois de editar como desejar, salve, arraste o gadget para onde deseja que ele fique e salve as alterações do Layout.

Facinho e fofo, né?


Aproveitando que estamos aqui você pode clicar em Curtir ou Compartilhar esse post?
É a forma correta de divulgar para seus amigos e leitores.
Jamais republique esse tutorial em seu blog, nem com créditos!
Indique com um link como seus leitores podem se beneficiar do tutorial!
Assim você ajuda as pessoas, ajuda meu blog e faz a coisa certa!

Fico muito agradecida!

E se gosta do blog e do conteúdo dele gostaria de curtir (se ainda não o fez) a nossa fanpage?
Aqui, ó:



Muito obrigada!!!!
14 comentários via Blogger
comentários via Facebook

14 comentários:

  1. Acompanho teu blog faz uns tempos rs Te seguia com a minha conta antiga e agora to seguindo com a nova conta. Impossível ficar sem as tuas dicas <3 Parabéns pelo blog :*


    Vem conhecer (e seguir) o meu cantinho e curti a página no Facebook *-*
    Blog: Cantinho da Mari
    Facebook: Cantinho da Mari
    Instagram do blog: @cantiinhodamarii
    Instagram pessoal: @hey.mari

    ResponderExcluir
  2. Elaine,adorei este tutorial,eu coloquei as redes sociais em uma página estática.
    Assim que der vou tentar colocar estes ícones.
    Parabéns,lindo fim de semana para vocês,bjs

    ResponderExcluir
  3. Esqueci de falar sua loja de templantes está linda, maravilhosa!!!
    Parabéns sucesso para você!!!

    ResponderExcluir
  4. Mais uma dica maravilhosa!
    Mas, no site do desenvolvedor, alguns ícones estão diferentes.
    Quando coloco do Instagram lá no site está atualizado, mas no blog continua com o símbolo antigo...

    ResponderExcluir
  5. Oi linda, vc arrassou na dica. Eu não levo jeito para fazer nada só rsrs.
    Beijos
    leniliz.com

    ResponderExcluir
  6. Dica perfeita e fácil.
    Estou aprendendo muito com os seis posts

    Parabéns

    ResponderExcluir
  7. é possivel alterar o codigo para abrir o link em uma nova guia?

    ResponderExcluir
    Respostas
    1. Sim, acrescente " target="_blank" antes de title, em cada item do menu.

      Excluir
  8. Olá Elaine, tudo bem? Muito obrigado pelo tutorial!!
    Seria possível alterar o ícone para uma imagem a minha escolha? (Sem ser as que estão no site do desenvolvedor), digo de autoria própria mesmo.
    Obrigado!

    ResponderExcluir
    Respostas
    1. Não, não é possível porque o menu não utiliza imagens e sim a fonte especial. Não são imagens dos ícones, mas sim, a fonte especial que os gera...

      Excluir
    2. Eu imaginava...muito obrigado e se possível um dia seria muito legal um post com os ícones fazendo efeito hover + a imagem que desejar colocar.
      Estou montando um blog surpresa para minha namorada em comemoração de 2 anos e você está me ajudando muito! Parabéns pelo seu trabalho e desejo sucesso =D

      Excluir
  9. Olá Elaine, muito bacana seu tutorial... só gostaria de saber se teria como deixar os ícones alinhados horizontalmente... no meu tema ficou um abaixo do outro (Verticalmente). desde de já muito obrigado!

    ResponderExcluir
    Respostas
    1. Evandro, em meus testes eles ficam alinhados verticalmente.
      Em qual blog está instalando?

      Excluir
    2. Oi Elaine, vi só agora que respondeu, rs...

      Então, ele ainda está em desenvolvimento e está com uma página em construção... como posso fazer para mostrar para vc?

      Excluir

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…



Visualizações

Contando...

Dias online
Postagens
comentários