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.
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)
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.
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.
ResponderExcluirInfelizmente, 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
Respondi na sua ask. Beijos :)
ExcluirFicar 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 *-*
ResponderExcluir/paradise