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:

6 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

© 2017 Sweet Magic. Re-Design: JD Design. Tecnologia do Blogger.