Menu de redes sociais com efeito hover

em 10 de agosto de 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!!!!

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

8 comentários , comente também!

  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

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…