Social Media Icons

  • 13:00
  • 29 julho 2016


Hey you! Hoje tem post no blog \o/
Apresento à vocês, botões para redes sociais, lindo, prático, e fácil de personalizar, e o melhor é que da pra criar vários e vários efeitos com eles, com tempo eu vou mostrar esses efeitos.. Blz ;)

Antes tinha que criar no photoshop esses botões, agora com essa praticidade, não mais! Eu uso aqui no blog como vocês podem ver.. No topo do blog, perfil, menu, post footer e no rodapé, eu adoro eles, ta na cara né!? :D Vamos ao tuto.

1. No menu do blogger, vai em editar html, clique dentro da caixa de códigos e dê ctrl + f e depois enter, após disso procure por <head>  no layout do zero (aonde aprendemos a criar do zero o lay) deixei nomeado aonde colocaríamos as fontes <!-- FONTES --> ... <!-- FIM DAS FONTES -->. Cole o código abaixo:

<link href='http://weloveiconfonts.com/api/?family=brandico|zocial' rel='stylesheet'/>

2. Agora procure por ]]></b:skin>, acima dele cole o código abaixo, tá explicadinho cada função no css dentro dos /* asteriscos */

#social-icons{
width: 100%;
}
#social-icons li {
display: inline-block; /* deixa um do lado do outro */
list-style-type:none; /* remove os pontinhos */
}
/* Links */
#social-icons li a{
display: inline-block; /* deixa um do lado do outro */
color: #ffb2c7; /* cor da fonte family */
font-size: 20px; /* tamanho da fonte */
font-family: 'zocial', sans-serif; /* fonte family */
line-height: 41px; /* ajuste se for aumentar a fonte */
background: #35373a; /* fundo */
border-radius: 50%; /* apague se não quer os botões redondo */
width: 40px; /* largura dos botões */
height: 40px; /* altura do botões */
margin: 3px; /* espaço entre eles */
}
/* Hover */
#social-icons li a:hover{
color: #000;
background: #CCC;
}

3. Agora vai em Layout no menu do blogger e adicionar um gadget, escolha o HTML/JavaScript, dentro do conteúdo adicione o código abaixo, coloque os links e salve, visualize 2 vazes pra aparecer.

<center>
<div id="social-icons">
<li><a href="LINK" class="zocial-blogger"></a></li>
<li><a href="LINK" class="zocial-facebook"></a></li>
<li><a href="LINK" class="zocial-flickr"></a></li>
<li><a href="LINK" class="zocial-gmail"></a></li>
<li><a href="LINK" class="zocial-googleplus"></a></li>
<li><a href="LINK" class="zocial-instagram"></a></li>
<li><a href="LINK" class="zocial-pinterest"></a></li>
<li><a href="LINK" class="zocial-tumblr"></a></li>
<li><a href="LINK" class="zocial-twitter"></a></li>
<li><a href="LINK" class="zocial-youtube"></a></li>
</div>
</center>




Aviso importante: Esses ícones só funcionam se seu https estiver desativado, saiba como clicando aquiEspero que gostem.. deixa seu like e comentário! Bjs e até +

Compartilhe

Veja Também:

Comentário(s)
4 Comentário(s)

  1. ÈEEEEEEEEEHHHHH!
    Tava precisando muito desse tuto Káh!
    Muito obrigadaaaaa ♥
    Amei muito *----------*
    Bessos,fique com Deus ♥
    Mari.

    ResponderExcluir
    Respostas
    1. Opaaa!
      De nada florsinha ^^
      Que bom que amou... Fico muito feliz em ajudar :D
      Fiquei com Deus também, Beijinhos ♥

      Excluir
  2. Já Indiquei seu blog no LIEBSTERAWARD Káh, desculpe hihihi :3
    Tá lá Bessos, fique com Deus *-*

    Visite aqui: https://novidadesestardoll.blogspot.com.br/2016/07/respondendo-tag-liebsteraward.html?showComment=1469905726416#c1067845645898978416

    ResponderExcluir
    Respostas
    1. Oh...! minha flor, não precisa se desculpar :)
      Vou responder a tag \o/
      Beijinhos e vc tbm fique com ele ♥

      Excluir