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:
E então cole no Gadget de HTML:
<!-- 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!
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.
