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 aqui. Espero que gostem.. deixa seu like e comentário! Bjs e até +
4 Comentário(s)
ÈEEEEEEEEEHHHHH!
ResponderExcluirTava precisando muito desse tuto Káh!
Muito obrigadaaaaa ♥
Amei muito *----------*
Bessos,fique com Deus ♥
Mari.
Opaaa!
ExcluirDe nada florsinha ^^
Que bom que amou... Fico muito feliz em ajudar :D
Fiquei com Deus também, Beijinhos ♥
Já Indiquei seu blog no LIEBSTERAWARD Káh, desculpe hihihi :3
ResponderExcluirTá lá Bessos, fique com Deus *-*
Visite aqui: https://novidadesestardoll.blogspot.com.br/2016/07/respondendo-tag-liebsteraward.html?showComment=1469905726416#c1067845645898978416
Oh...! minha flor, não precisa se desculpar :)
ExcluirVou responder a tag \o/
Beijinhos e vc tbm fique com ele ♥