Como colocar icons hover de Redes Sociais no Blog

julho 16, 2018


Konnichiwaa fadinhas e elfos! Como vocês estão?  Hoje vou ensinar como colocar redes sociais modernas no seu blog! Apesar de ser mais usado a forma de imagem em png, com facebook, instagram e etc. Também tem a versão com botões em html e com efeito ao passar o mouse! Se prefere esse, o post foi feito para você! E então, let's go?

O código foi todo editado e adaptado por mim com base no w3school, montei 3 opções para usar, a primeira com fundo quadrado, a segunda com fundo redondo e a terceira com imagem. Escolha a versão que mais gostar e então siga o tutorial desse em especifico!

Versão CSS/HTML: Redes sociais quadradas



Ele vai ficar assim como esse acima 
Para usar a versão quadrada basta ir em Tema + Editar HTML e procure por /b:skin , cole ABAIXO o seguinte CSS:

<!-- Estilo dos icons quadrados --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<style type='text/css'>
.square-icons {
  padding: 10px; /* espaçamento */
  font-size: 18px; /* tamanho do icone */
  width: 18px;  /* tamanho do fundo */
  text-align: center;
  text-decoration: none;
  margin: 5px 2px; /* espaçamento entre eles */
  background: #f0e9e9; /* cor do fundo */
  color: #fff; /*cor do icone */
}
.square-icons:hover {
    background: #ccc;  /*  cor de fundo com mouse encima */
    color: #fff;  /* cor do icone com mouse encima */
    opacity: 0.7;
}
</style>

Personalizando:

Cores: Nele você pode modificar a cor, mude a # da cor. Para saber qual cor você prefere consulte: Colors Info, e então copie e substitua no css. Deixei tudo anotado no próprio css, para saber onde é cada cor
Tamanho: Para modificar o tamanho basta editar a parte de width e font-size, caso queira menor coloque um numero menor (ex: 12px) , ou se quiser maior coloque um numero maior (ex: 30px)
Obs: As frases dentro de /* */ é apenas para destacar cada coisa, é para alterar o que está antes dele.

Depois de já ter colado o CSS, adicione o HTML onde você quer que ele apareça. Eu por exemplo coloquei na sidebar, para fazer o mesmo, vá em Layout, adicione o Gadget HTML/Javascript e então cole:

<!-- Adicione seu link e font awesome icons -->
<center>

<a href="#" class="square-icons fa fa-facebook"></a>

<a href="#" class="square-icons fa fa-twitter"></a>

<a href="#" class="square-icons fa fa-google"></a>

<a href="#" class="square-icons fa fa-youtube"></a>

<a href="#" class="square-icons fa fa-instagram"></a>

<a href="#" class="square-icons fa fa-pinterest"></a>

<a href="#" class="square-icons fa fa-rss"></a></center>


Personalizando:

Links: É extremamente importante que você substitua a # pelo seu link sem apagar as aspas
Exemplo: "https://twitter.com/sweetmagicblog''
Ícones: Caso queira trocar o icone de algum modifique a palavra, exemplo "fa fa-facebook" se quiser we heart it mudaria para "fa fa-heart" para maiores opções consulte: Awesome Icons
Obs: Esse tutorial serve para todos os tipos, tanto em Wordpress, tanto para sites diretos. É só adicionar o CSS e o HTML no local apropriado.

Versão CSS/HTML: Redes sociais redondos


Sei que muitas pessoas gostam das redes sociais na versão redonda, pensando nisso fiz essa para vocês também. É o mesmo passo da primeira versão, só modifica o CSS, ou seja, caso queira essa versão, copie o CSS, abaixo de /b:skin:

<!-- Estilo dos icons redondos -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<style type='text/css'>
.circle-icons {
  padding: 10px; /* espaçamento */
  font-size: 18px; /* tamanho do icone */
  width: 18px; /* tamanho do fundo */
  text-align: center;
  text-decoration: none;
  margin: 5px 2px; /* espaçamento entre eles */
  border-radius: 50%;  
  background: #f0e9e9; /* cor do fundo */
  color: #fff; /*cor do icone */
}
.circle-icons:hover {
    background: #ccc; /*  cor de fundo com mouse encima */
    color: #fff;  /* cor do icone com mouse encima */
    opacity: 0.7;
}
</style>

E então cole no Gadget de HTML:

<!-- Adicione seu link e font awesome icons -->
<center>
<a href="#" class="circle-icons fa fa-facebook"></a>
<a href="#" class="circle-icons fa fa-twitter"></a>
<a href="#" class="circle-icons fa fa-google"></a>
<a href="#" class="circle-icons fa fa-youtube"></a>
<a href="#" class="circle-icons fa fa-instagram"></a>
<a href="#" class="circle-icons fa fa-pinterest"></a>
<a href="#" class="circle-icons fa fa-rss"></a> </center>

Versão básica html: Hover com imagem


Agora se tem algum ícone que você já adora e não quer um simples como esses dois acima, basta fazer com seu próprio ícone, mas para isso é necessário que edite uma versão mais clara ou escura do seu ícone, quando ao passar o mouse acima mudar sabe?

Tenha duas cores do seu ícone, e então vá em Layout, Adicionar Gadget + Javascript/HTML e cole:

<a href="ENDEREÇO-DO-LINK"><img src="ENDEREÇO-DA-IMAGEM-1" border="0" onmouseover="this.src='ENDEREÇO-DA-IMAGEM-2'" onmouseout="this.src='ENDEREÇO-DA-IMAGEM-1'"></a>

ENDEREÇO-DO-LINK: Este será o link para onde redirecionará quando a imagem for clicada.
ENDEREÇO-DA-IMAGEM-1: Este deve ser o link de onde se encontra a imagem 1, a principal.
ENDEREÇO-DA-IMAGEM-2: Este deve ser o link da imagem 2, a qual deverá aparecer ao passar o mouse por cima.

Já está destacado no HTML onde deve adicionar os links, salve e prontinho!

Possíveis dúvidas:
June! O css tá dando erro no meu template, ele é baixado! O que eu faço? Substitua o <style type='text/css'> por <style> .
O estilo não aplica ou buga? Tente colocar tudo junto mesmo, css e html, dentro do Gadget de JavaScript/HTML.
Por hoje é só, Qualquer dúvida é só perguntar nos comentários, ou entre em contato nessa página (aqui). Até mais e Kissus! Está tendo post toda semana então segue o bloguinho e visite sempre!! | Redes Sociais do Sweet Magic: Facebook | Twitter | We heart It | Bloglovin | Pinterest

Leia também:

8 comentários

  1. Conteúdo claro e de ótima qualidade, como sempre! Parabéns pelo ótimo trabalho :)
    E só pra avisar, já respondi a Tag que você me indicou!
    Até mais :D

    ResponderExcluir
    Respostas
    1. Obrigadaa! Fico feliz em saber que gosta!
      Aaaaah que legal! Desculpe a demora, vou olhar lá! Kissus
      Obrigada por acompanhar!

      Excluir
  2. Oi Ju! Tudo bem?
    Amei este tutorial, muito bom! Eu acho que no meu novo layout nos botões de compartilhar tenho o de efeito hover redondo, porque eu não tive de utilizar imagens.
    Beijinhos e que venha mais posts de html!
    www.y-ukinoyume.blogspot.pt

    ResponderExcluir
    Respostas
    1. Oi Inês! Tudo sim e você?
      Que bom que gostou! Que legal que o seu já é assim, bem melhor né? Eu coloquei aqui e fica moderno! KK siim, vou continuar sempre que der! Kissus e obrigada pela visita!

      Excluir
  3. Adorei o tutorial! Esses botõezinhos facilitam super a nossa vida em um blog!

    - Conheça meus blogs:
    Blog Meu Baú de Estrelas
    Blog Bilhetes de Busan

    ResponderExcluir
    Respostas
    1. Que bom que gostou! Facilita demais mesmo né?
      Obrigada pela visita, kissus!

      Excluir
  4. Nossa amo muito seu blog!!!! <3

    ResponderExcluir