15 outubro 2015

Redes Sociais / Social Icons

| |
Olá! Como devem ter percebido, eu tenho andado um pouco sumida. Meu leitores mais antigos já sabem o motivo: escassez de ideias. Graças a Deus, uma alma foi fazer um pedido que eu achei bem lá na ask. Obrigada ;-;

Hoje eu vou ensinar a encontrar e "enfeitar" ícones de redes sociais e também vou disponibilizar três menus bem discretos para SN.

Novamente, eu sei que é muito chato ter que fazer isto, mas se puderem, poderiam passar lá na ask e pedir algo? Não precisa ter conta para deixar uma pergunta.

Anyway, clique no coração para continuar lendo.


O primeiro passo é achar os ícones. Antigamente, isto era uma tarefa bem difícil para mim, mas hoje acredito que essa seja a parte mais fácil e divertida. É só visitar este site e escolher os ícones que mais gosta. Há uma variedade muito grande, então você provavelmente vai achar um que goste.

Após achar o ícone que mais gosta, clique nele e faça o download. Você pode baixa-lo em PNG, JPG ou PSD, o que torna tudo mais fácil. Geralmente, eu baixo o PNG, mas escolha o que acha melhor para você. Você também pode escolher a cor que quiser.

Eu escolhi a cor preta, pois prefiro mudar a cor depois, assim, se algo der errado, é fácil de consertar. Para colorir o ícone preto, aperte Shift+Ctrl+N. Uma camada transparente aparecerá. Selecione o pincel e, em seguida, escolha uma cor e pinte esta nova camada.

Clique com o botão direito nesta camada colorida e selecione 'Create Clipping Mask'. Depois disso, clique novamente com o botão direito na camada colorida e selecione 'Merge Down'.

Para dar um pouco mais de vida, aperte duas vezes na camada para abrir o 'Layer Style'. Mude o que achar melhor e depois salve.

Depois que terminar tudo, não se esqueça de salvar em PNG.

...

Menus (1, 2, 3)

/* Menu Social #1 */
.socialicons-isa {
height: 100px;
width: 35px;
border-radius: 5px;
padding: 10px;}
.rotate-icons-isa {
opacity:1;
-webkit-transition-duration: .80s;
-moz-transition-duration: .80s;
-o-transition-duration: .80s;}
.rotate-icons-isa:hover {
-webkit-transform:translatex(15px) rotate(360deg);
-webkit-transition-duration: .80s;
-moz-transition-duration: .80s;
-o-transition-duration: .80s;
}
/* Menu Social #2 */
.social-icons-isa {
height: 100px;
width: 35px;
border-radius: 5px;
padding: 10px;}
.icons-isa {
opacity:1;
-webkit-transition-duration: .80s;
-moz-transition-duration: .80s;
-o-transition-duration: .80s;}
.icons-isa:hover {
-webkit-transform:translatex(20px);
-webkit-transition-duration: .80s;
-moz-transition-duration: .80s;
-o-transition-duration: .80s;
}
/* Menu Social #3 */
.social-iconss-isa {
height: 100px;
width: 35px;
border-radius: 5px;
padding: 10px;}
.iconss-isa {
opacity:1;
-webkit-transition-duration: .80s;
-moz-transition-duration: .80s;
-o-transition-duration: .80s;}
.iconss-isa:hover {
-webkit-transform:rotatey(360deg);
-webkit-transition-duration: .80s;
-moz-transition-duration: .80s;
-o-transition-duration: .80s;
}

Após escolher o que mais gostou, abra a estrutura HTML do seu blog e procure por </header> e acima cole:

#1
<div style='position: fixed; margin-top: 40px; margin-left: -80px;'>
<div class="socialicons-isa">
<a href="http://"><img src="http://i61.tinypic.com/2n0sto5.png" class="rotate-icons-isa"></a>
<a href="http://"><img src="http://i61.tinypic.com/2n0sto5.png" class="rotate-icons-isa"></a>
<a href="http://"><img src="http://i61.tinypic.com/2n0sto5.png" class="rotate-icons-isa"></a>
<a href="http://"><img src="http://i61.tinypic.com/2n0sto5.png" class="rotate-icons-isa"></a>
</div></div>

#2
<div style='position: fixed; margin-top: 40px; margin-left: -80px;'>
<div id="icons-isa">
<div class="social-icons-isa">
<a href="http://"><img src="http://i61.tinypic.com/2n0sto5.png" class="icons-isa"></a>
<a href="http://"><img src="http://i61.tinypic.com/2n0sto5.png" class="icons-isa"></a>
<a href="http://"><img src="http://i61.tinypic.com/2n0sto5.png" class="icons-isa"></a>
<a href="http://"><img src="http://i61.tinypic.com/2n0sto5.png" class="icons-isa"></a>
</div> </div></div>

#3
<div style='position: fixed; margin-top: 40px; margin-left: -80px;'>
<div class="social-iconss-isa">
<a href="http://"><img src="http://i61.tinypic.com/2n0sto5.png" class="iconss-isa"></a>
<a href="http://"><img src="http://i61.tinypic.com/2n0sto5.png" class="iconss-isa"></a>
<a href="http://"><img src="http://i61.tinypic.com/2n0sto5.png" class="iconss-isa"></a>
<a href="http://"><img src="http://i61.tinypic.com/2n0sto5.png" class="iconss-isa"></a>
</div>
</div>

Não copie o #1,2,3, é só uma maneira que encontrei para indicar qual é o código que deveriam copiar, ok?

O <div style="position: fixed..." faz o menu se fixar no topo do blog. Mude os margins para ajusta-lo de maneira que deixe-o visível.

Bem, é só isso. Espero que tenham gostado.

Este post foi escrito há décadas, mas por causa de alguns imprevistos acabei não postando.

3 comentários:

  1. Oi Isa, tudo bem? Quanto tempo eu não comento em nenhuma postagem aqui :B . Que bom saber que alguns dos blogs antigos que sigo ainda estão na ativa.
    Infelizmente, sofro do mesmo problema que você: falta de ideias para o que postar, e isso é bem triste. Parece que eu deixei o blog de lado, porém eu apenas não tenho nada para postar...
    Esses efeitos para links de redes sociais são bem legais, ficam melhores quando usa-se ícones redondos shauhsuahs. Eu gosto de pegar os meus ícones neste site [www.flaticon.com] , além de ícones de redes sociais tem muitos outros ícones super úteis, e também tem diversos formatos para baixar e até como editar as cores.
    Isa eu entrei no seu site de previews no tumblr e queria saber qual é o tutorial dos menus Borders, eu queria usa-los em um template que estava fazendo (creditaria você, claro) mas não achei o tutorial .-.

    Beijinhos , muitas saudades daqui! <3

    We Heart HTML

    ResponderExcluir
  2. Ficar sem ideias é complicado... Sei como é, pensei em voltar com a minha ask, mas não tenho paciência pra entrar sempre. gostei muito do menu e no meu próximo lay eu vou usar *-*
    /paradise

    ResponderExcluir

« »