Como colocar icons hover de Redes Sociais no Blog

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:

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.

Aproveite e leia também:
MODELOS DE BLOCKQUOTE PERSONALIZADOS
10 MANEIRAS FÁCEIS DE MELHORAR O CONTEÚDO DO SEU BLOG
COMO PERSONALIZAR BOTÃO ''LEIA MAIS'' DO BLOGGER: VERSÃO CSS

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