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

Versão básica html: Hover com imagem

<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>