Menu de redes sociais- com ícones grátis para você usar!

em 12 de março de 2013

Oi, leitor!
Hoje vou te mostrar como ter em seu blog um menu para redes sociais como este:


Para começar acesse o painel de seu blog e clique na aba Layout.
A seguir clique em Adicionar um gadget e na janela de opções que abrir escolha HTML/JAVASCRIPT.
Na janelinha que expandir cole este código:
Para copiar o código pare o mouse sobre ele e clique no primeiro símbolo que aparecer. Vai abrir uma janelinha com o código completo.

<table style="text-align: left; width: 200px;" border="0"
cellpadding="0" cellspacing="0">
<tbody>
<tr>

<td style="text-align: left;" valign="undefined"><a

href="ENDEREÇO DE SEU PERFIL"><img

style="border: 0px solid ; width: 48px; height: 48px;" alt=""

src="ENDEREÇO DE SEU ÍCONE"

title="NOME DA REDE SOCIAL" /></a ></td>

<td style="text-align: left;" valign="undefined"><a

href="ENDEREÇO DE SEU PERFIL"><img

style="border: 0px solid ; width: 48px; height: 48px;" alt=""

src="ENDEREÇO DE SEU ÍCONE"

title="NOME DA REDE SOCIAL" /></a

></td>

<td style="text-align: left;" valign="undefined"><a

href="ENDEREÇO DE SEU PERFIL"><img

style="border: 0px solid ; width: 48px; height: 48px;" alt=""

src="ENDEREÇO DE SEU ÍCONE"

title="NOME DA REDE SOCIAL" /></a

></td>

</tr>
</tbody>
</table>

 
Aqui o código aberto, separado por cores para você entender melhor:

<table style="text-align: left; width: 200px;" border="0"
cellpadding="0" cellspacing="0">
<tbody>
<tr>

<td style="text-align: left;" valign="undefined"><a
href="ENDEREÇO DE SEU PERFIL"><img
style="border: 0px solid ; width: 48px; height: 48px;" alt=""
src="ENDEREÇO DE SEU ÍCONE"
title="NOME DA REDE SOCIAL" /></a ></td>

<td style="text-align: left;" valign="undefined"><a
href="ENDEREÇO DE SEU PERFIL"><img
style="border: 0px solid ; width: 48px; height: 48px;" alt=""
src="ENDEREÇO DE SEU ÍCONE"
title="NOME DA REDE SOCIAL" /></a
></td>

<td style="text-align: left;" valign="undefined"><a
href="ENDEREÇO DE SEU PERFIL"><img
style="border: 0px solid ; width: 48px; height: 48px;" alt=""
src="ENDEREÇO DE SEU ÍCONE"
title="NOME DA REDE SOCIAL" /></a
></td>

</tr>
</tbody>
</table>


Agora vamos entender o código:
Onde marquei em:
Pink: começo do código;
Vermelho: endereço de seu perfil.
Exemplo: meu perfil no Facebook é  https://www.facebook.com/elaine.gaspareto;
Marrom: tamanho dos ícones. Deixe os valores em width e height iguais;

Verde: endereço do ícone que deseja usar;
Azul: nome da rede social que corresponde ao ícone e ao endereço do perfil;
Roxo: fechamento do código.

Exemplo de como ficaria meu ícone do Facebook:

<td style="text-align: left;" valign="undefined"><a
    href="
https://www.facebook.com/elaine.gaspareto"><img     style="border: 0px solid ; width: 48px; height: 48px;" alt=""     src="https://lh3.googleusercontent.com/-16f57NVHuBU/TXqEUvHSY_I/AAAAAAAAAGY/sMSjVfWXl4Q/s1600/facebook_alt.png"
    title="Facebook" /></a
    ></td>


Este modelo que estou mostrando está preparado para 3 redes sociais, mas se você quiser acrescentar mais basta colar esta parte antes do fechamento do código (em roxo):

<td style="text-align: left;" valign="undefined"><a 
    href="ENDEREÇO DE SEU PERFIL"><img 
    style="border: 0px solid ; width: 48px; height: 48px;" alt="" 
    src="ENDEREÇO DE SEU ÍCONE" 
    title="NOME DA REDE SOCIAL" /></a 
    ></td> 

Após personalizar todos os campos clique em Salvar. Arraste seu gadget paraonde deseja que ele fique (sugiro o começo da coluna lateral) e clique em Salvar alterações.
Só isso, e está pronto.

Para terminar separei alguns ícones pra você usar. Clique sobre cada imagem que desejar usar, salve-as imagens em seu pc, hospede-as e use à vontade:


 





 

 



 











 Como hospedar imagens usando o próprio Blogger:
Crie uma postagem-rascunho, que nunca será publicada. Faça upload das imagens que deseja usar. Após carregar todas clique sobre cada uma delas com o botão direito do mouse. Então selecione a opção Copiar link (se estiver usando o Firefox), Copiar url da imagem (se estiver no Chrome) ou ainda Copiar atalho (se estiver no Internet Explorer).
Este é o endereço http de sua imagem.

Gostou?
Então compartilhe!
Eu agradeço muito se você recomendar esta postagem no G+, curtir no Facebook ou retuitar


Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

86 comentários , comente também!

  1. OLá Elaine
    Adorei as dicas, e os ícones são bem diferentes dos que vemos por aí!
    Obrigada por compartilhar!
    bjs
    Paty

    ResponderExcluir
  2. Oi Elaine,

    Perfeito! Fiz no meu blog! É claro que coisa boa agente compartilha!

    bjs

    ResponderExcluir
  3. Oi querida Elaine,foi muito bom ter achado você,com palavras entendíveis para me auxiliar nesta empreitada,faz só 5 meses que fiz meu blog,confesso, sem ter noção de nada,perguntando se chega a roma,no meu caso lendo as dicas das blogueiras até chegar em você,pelos comentários das meninas do "tacho da pepa",por Nil de "mulheres virtuosas",e por Lucia "Calma que estou com Pressa".então Elaine querida,tuas dicas são um bálsamo salvador,para esta blogueira inexperiente.Muito obrigado e que chovam trabalhos de todos os cantos .Deus te abençoe muito,muito.
    Beijinhos

    ResponderExcluir
  4. Êba, consegui colocar lá no blog, na verdade só dei uma substituída nos ícones que eu tinha por 2 diferentes que vc deixou aqui pra gente, como sou exagerada dei uma aumentada no tamanho, rs. Quando dá certo, grito: êba... qdo faço lambança, grito: Elaine, socooooorro!!!
    Obrigada por mais essas dicas, bjs.

    ResponderExcluir
  5. Achei muito legal! Quero para Face e Twitter.

    PS: passei a data da reabertura do RO para 02/04, assim dará mais tempo para você, ok?

    Beijos querida.

    ResponderExcluir
  6. Adorei! Muito legal. bjos.
    http://robertarodrigueslady.blogspot.com.br/

    ResponderExcluir
  7. Adorei essas dicas :DDD

    http://emummundopossivel.blogspot.com.br/

    ResponderExcluir
  8. Adorei as dicas. Como está o Maridão? E você Elaine? Fiquem com Deus. Bjs

    ResponderExcluir
  9. Oi, Elaine!
    Muito obrigada por mais essa ajuda! Já coloquei nos meus dois blogs.
    Beijos e fique com Deus!

    ResponderExcluir
  10. Olá Elaine

    Passando rapidinho, pois estou totalmente sem tempo.

    AMIGA da MODA by Kinha

    ResponderExcluir
  11. Amei, estava mesmo precisando de uns ícones legais para meu blog, beijos.

    ResponderExcluir
  12. Oi Elaine!
    Amei os ícones! Um mais fofo que o outro!!!
    Vou tentar colocar no blog e depois te conto!
    Beijocas,
    Cris

    ResponderExcluir
  13. Elaine estas suas dicas são maravilhosas!
    Por favor me ajude, estou recebendo muitos comentários em uma só postagem de anônimos e não sei qual melhor opção para resolver isto:

    Qualquer pessoa - inclui Usuários anônimos
    Usuário registrado - inclui OpenID
    Usuário com contas do Google
    Somente membros deste blog


    Qual coloco?

    Obrigada pela atenção!

    Beijinhos...

    ResponderExcluir
  14. Estou fazendo uma modificações no layout do blog por causa do aniversário de um ano do Pitacos de Lua...acho que essa dica veio a calhar :)
    ***

    Elaine no próximo ano eu faço sorteio entre as pessoas que contribuíram pro layout do blog, para algum gadget, dica de html e com certeza vc concorre, porque né... :)

    Eu gosto muito de Supernatural, comprei a série inteira numa promoção no Submarino e estou contente que a 8ª temporada começou na Warner.
    Eu gosto do John, e o ator que fez o pai na série é tudo de bom, mas confesso que lendo diário dele, me deu certa raiva do Jonh. Ele foi um marido tão obstinado em vingar a morte da esposa que acabou meio que desgraçando a vida dos garotos, lendo o diário e acompanhando a infância deles, me deu muita pena principalmente do Dean, aquele lindo rs

    ResponderExcluir
  15. Esse é bem mais fácil, rsrs
    Meu blog já tinha um botão de redes sociais igual ao que vc usa aqui no seu blog, dáí vi um post antigo que vc fez com outro botão para editar html e instalei no meu blog. Acabei ficando com os dois e não consigo desinstalar nenhum. Você pode me dizer onde encontro essa dica?
    Obrigada, Eline

    ResponderExcluir
  16. Oi Elaine! O que seria de nós sem vc. Rsrs. Já visto estas dicas em outros blogs, mas você torna tudo mais fácil. Vou tentar fazer no fim de semana. Obrigada por partilhar.
    Bjs.

    Jussara
    caminhandonaarte.blogspot.com.br

    ResponderExcluir
  17. Bom dia Elaine gostei muito das dicas mas me diz uma coisa e desculpa a lerdeza rsrs no caso dos ícones para criar o endereço da imagem numa postagem de rascunho, até ai eu entendi mas depois de copiar o link da mensagem eu colo onde depois?!
    agradeço desde já
    bjs

    ResponderExcluir
    Respostas
    1. Sol, não é o link da mensagem, é o link da imagem. Daí cola no lugar indicado, link do ícone.
      beijossss

      Excluir
  18. Elaine,
    Coloquei usuário registrado está certo?
    Por favor me responda!

    Beijos...

    ResponderExcluir
    Respostas
    1. Zizi, pode ser este e também pode ser usuários com contas google.
      bjsss

      Excluir
  19. Eu escolhi este porque tenho alguns seguidores tem contas diferentes!
    Obrigada querida e bom fim de semana!

    Beijinhos em sua alma illuminada...

    ResponderExcluir
  20. Elaine querida, a tempos estava procurando um jeito de colocar esses icones no meu blog, sempre achando uns jeitos bem dificeis de fazer isso (levando em conta minha limitação pra mexer nos templantes)..... dai que venho aqui (e é sempre aqui) achei esse teu post e sabe o que aconteceu????? consegui personalizar meus icones e ja estão em funcionamento la no blog.
    Muito, muito muito obrigada por tudo.
    Querendo conferir como sua "aluna" se sai de um pulinho no Blog da Gullo.
    Um super beijo e inté.

    Marcia Gulo

    ResponderExcluir
  21. Elaine eu adoro o seu blog. E através dele estou aprendendo muito.
    Obrigado!

    ResponderExcluir
  22. Elaine, amo o Blog, amo suas dicas. Abraços.

    ResponderExcluir
  23. Flor, eu não sou de deixar comentário, mas não tive como: você está de parabéns! Fiquei um dia todo buscando em vários sites como fazer isto e nunca dava certo!

    Agora, por aqui, consegui!

    Muito obrigada!

    ResponderExcluir
  24. Elaine, fiz esse PAP tbm e ficou certinho, estou amando as dicas.

    Bjs

    ResponderExcluir
  25. Elaine, suas dicas são ótemas! adoooooro. Dá pra fazer um ícone fofinho, redondinho do twitter? só faltou esse pra mim. Obrigada, Cris

    ResponderExcluir
  26. amei... queria saber como faz pra deixar os ícones mais separados!
    beijos

    ResponderExcluir
    Respostas
    1. Suzzane, para separar mais aumente a largura total do gadget: onde está 200px aumente até chegar no grau de separação que deseja.
      bjssss

      Excluir
  27. Amei o post tudo bem explicadinho.

    ResponderExcluir
  28. Valeu! Comecei meu blog tem pouquissimo tempo, ele é um bebê, e tava louca atrás desse código. Tá curtido. :)

    ResponderExcluir
  29. ótima dica! já está pronto em meu blog... visitarei vc mais veses
    http://felizanovelho.blogspot.com.br/

    ResponderExcluir
  30. Deu certinho!
    Obrigada por compartilhar!
    Carla

    ResponderExcluir
  31. Eliane não consigo copiar o cod. oque esta acontecendo?

    ResponderExcluir
    Respostas
    1. Leia esta página: http://www.elainegaspareto.com/p/como-usar-os-tutoriais-deste-blog.html
      Mas o artigo também explica como copiar, em itálico.
      Você leu?

      Excluir
  32. Oiii, tudo bem?
    Ótimo seu tutorial e super simples. Muito obrigada.
    Parabéns pelo blog!!!

    ResponderExcluir
  33. Quero muito fazer isso LINDA! mas não consigo copiar os códigos que vc colocou! :/

    pleaseee
    bjos

    www.marilenecarmo.com

    ResponderExcluir
    Respostas
    1. Marilene, boa noite
      Pare o mouse sobre o código, vai aparecer uns ícones do lado direito. clique no primeiro, parecido com isso: <>
      Daí vai abrir uma janela com o código.
      Certo?
      beijossss

      Excluir
    2. peguei alguns icones e segui suas dicas

      Excluir
  34. Eu amei esta dica! E também já apliquei no meu blog -- editei meus próprios ícones e fiquei contente com o resultado ;) -- Muito obrigada mesmo!!!!

    ResponderExcluir
  35. Olá, já apliquei no meu blog, ficou MUITO bom, sério, e as suas dicas, estava procurando muito e não achava nada explicando direitinho, e você explica super bem, muito boa as suas dicas e tudo mais, gostei muito do blog, o que eu procuro em diversos sites, acho aqui, e acho muito bem explicado, parabéns! <3

    ResponderExcluir
  36. Obrigada pela ajuda, ganhou uma seguidora :D
    Tentei vários outros tutoriais, mas o seu é o mais completo!

    http://magrelezas.blogspot.com.br/

    ResponderExcluir
  37. Oi Elaine,
    Como sempre, mais uma ótima dica com tudo muito explicadinho e fácil de fazer. Já coloquei lá no blog, e notei que quando clica no ícone, a página muda para a rede social. Eu queria que abrisse nova página, pra que a do meu blog continue ativa. Como faço?

    Beijos
    patriciaaprendendo.com

    ResponderExcluir
  38. Já consegui, Elaine. Graças a tudo que venho aprendendo aqui com você, incluí o -target = "_blank "- logo após o endereço do link. Acho que fica melhor assim, já que a pessoa entra na rede social, mas continua com minha página aberta. Concorda comigo?
    Mais uma vez obrigada pela grande contribuição para nossos blogs.

    Beijos

    ResponderExcluir
  39. Olá, Elaine! Poxa, parece que eu fui a única que fez e não deu certo, será que vc me ajuda? Não entendi isso aqui, olha:"ENDEREÇO DO ÍCONE QUE DESEJA USAR". Como assim endereço do ícone? Eu baixei os que vc deixou pra a gente no seu blog e salvei todos em uma pasta, mas e agora? Desculpe, eu sou patinha mesmo, como falei antes, rs!

    ResponderExcluir
    Respostas
    1. Luciane, o endereço do ícone é o que você obtém quando o hospeda.
      Releia o tópico Como hospedar imagens usando o próprio Blogger e vai dar certo.
      Não se ache patinha, às vezes a gente deixa mesmo passar um detalhe...
      bjssss

      Excluir
  40. Mas um dica instalada com sucesso no meu blog. Muito obrigada!

    ResponderExcluir
  41. Você não imagina o bem que tem feito a mim e ao meu blog. Muito obrigada. Que Deus continue te dando inteligencia para criar essas coisas ótimas e fáceis para blogs e a bondade e amor para continuar partilhando. Veja como meu blog está quase profissional
    www.tudosobreelvis.com

    Obrigada mais uma vez.

    ResponderExcluir
  42. Oi querida. amei suas dicas . to colcada em vc.
    mas me tire uma dúvida quando vc fala ENDEREÇO DO ÍCONE QUE VC DESEJA USAR . não consigo entender .
    não conseguir colocar no meu blog. me ajuda?

    ResponderExcluir
  43. Oi Elane olha eu de novo rsss.
    vc faz alterações em Blog? pois mandei fazer meu template e gostaria de mudar cores e fontes. não sei fazer nada disse menina. ME AJUDA? RSSSS

    ResponderExcluir
  44. Nossa, não tem como passar aqui e não deixar um comentário. O seu blog é maravilhoso, não é a toa que você tem tantos acessos, você está colhendo os frutos do seu trabalho. Estou simplesmente amando os seus tutoriais, está me ajudando muito a economizar uma graninha pois eu mesma estou arrumando algumas coisas no meu blog que a princípio iria pagar por não estar conseguindo.
    Muito obrigada viu!

    ResponderExcluir
  45. Gente, me ajuda. Não consigo copiar o link.

    ResponderExcluir
  46. Obaaaaaaaa, consegui, já tinha visto em outros blogs mas nunca deu certo! OBRIGADA. Vou marcar presença em seu blog!

    ResponderExcluir
  47. Muito facil,eu amei tudo!!Usei só o do Facebook

    ResponderExcluir
  48. Elaine, usei e adorei, obrigada, se quiser passa no blog e da uma olhada, bjs
    raquel faleiro
    http://raquelfaleiro.blogspot.com.br/

    ResponderExcluir
  49. Boa tarde amiga Elaine!!!
    Hoje estou fazendo um post sobre algumas mudanças que fiz em meu blog e coloquei seu link, para quem quiser vir e aprender como colocar os botões/menus de redes sociais.
    Muito obrigada por compartilhar e nos ajudar tanto.
    Deus lhe abençoe sempre!!!
    Feliz e Abençoada Semana!!!
    Bjokas...da Bia!!!

    ResponderExcluir
  50. Adorei a dica, consegui colocar em meu blog. Obrigada!
    Bjos, Mari.

    ResponderExcluir
  51. Funcionou. Acabei de colocar no meu blog. Foi o 4º tutorial que segui. Não tinha dado certo com os outros. A imagem não aparecia, o link não levava para minhas páginas das redes sociais. Fiz copiando o seu código e num primeiro momento só deu certo para o código do meio. Daí copiei o do meio para os outros e copiei de novo o URL da imagem e então deu tudo certo. É estranho, mas o URL da imagem (que eu copiei todas as vezes do meu album Picasa na web) veio diferente na última vez que copiei e então os ícones começaram a aparecer. Obrigada. Beatriz

    ResponderExcluir
  52. Oi, Eliane
    Eu consegui colocar os íconos no blog, mas gostaria que eles fossem centralizados, mas eles está para a esquerda... tem como ajeitar isso?
    Obrigada,
    Sheyla.

    ResponderExcluir
  53. Oi,Elaine seu tutorial me ajudou muitooo !!
    http://karolferreiraa.blogspot.com.br/

    ResponderExcluir
  54. Muito grata Eliane, deu tudo certo consegui por os botões sem muitas dificuldades!
    Estou feliz pq não manjo muito htlm e fico com medo de algo acontecer com blog e eu não consegui resolver.rs
    Abraços!

    ResponderExcluir
  55. Obrigado, você me ajudou demais!!!! Peguei alguns ícones.

    ResponderExcluir
  56. Elaine, parabéns pelo seu trabalho, é maravilhoso!!! Estou tirando grande proveito das suas postagens e te convido a visitar meu blog, http://revoltafutebolclube.blogspot.com.br

    ResponderExcluir
  57. Meu cantinho preferido!!! Sempre acho aqui, tudo o que eu quero e preciso!!!! \0/ \0/

    ResponderExcluir
  58. \0/ Deu certo!!! Ficou show!!! Obrigada, por compartilhar sempre!!!! :)

    ResponderExcluir
  59. Elaine, eu fiz exatamente como você colocou no blog. Porém o link que está na imagem fica diferente. Dentro do gadget está certinho por exemplo "www.facebook.com/elainegaspareto" porem quando clico atraves do blog redireciona assim "www.elainegaspareto.comwww.facebook.com/elainegaspareto. como resolvo?

    ResponderExcluir
    Respostas
    1. Sâmia,
      Releia o tutorial, se colocar o endereço correto no local correto não tem erro.
      bjsss

      Excluir
  60. Gostei bastante, estava procurando um menu desses para colocar debaixo do mu perfil, seu ícones são diferentes, foi o que mais gostei
    justnalandisses.blogspot.com.br

    ResponderExcluir
  61. Caramba, eu passei muito tempo pra entender como colocar as redes sociais no blog, mas com esse seu post ficou tudo muito mais fácil, obrigada! :)

    Bjs
    www.leticiagurjao.blogspot.com.br

    ResponderExcluir
  62. Elaine, obrigada por compartilhar seus conhecimentos com a gente! Meu blog tá ficando fofo e organizado graças às suas dicas!
    Muito sucesso!

    ResponderExcluir
  63. Oi Eliana gostei muito do seu blog peguei sua dica e ficou muito bom no meu blog! https://kahpinheirosilva.blogspot.com.br/

    ResponderExcluir
  64. Muito bom o seu post
    se não se importa sera que posso colocar no meu blog ?

    Photography Day

    ResponderExcluir
  65. Obrigada!!
    Coloquei no meu e ficou lindo!! *-*

    ResponderExcluir
  66. Eu fiz no meu blog e deu certinho. Obrigada Elaine!
    Beijos

    ResponderExcluir
  67. Elaine, há alguma forma dentro deste código de inserir o espaçamento entre as imagens (utilizando 4 ícones das redes)?

    Desde já agradeço.

    ResponderExcluir
    Respostas
    1. Deise, tem sim.
      Basta aumentar o valor expresso em width: 200px;
      Isso vai aumentar o espaçamento.
      bjssss

      Excluir
    2. Obrigada, deu certo!!!
      Beijos :)

      Excluir
  68. Oi Elaine, não consigo copiar o codigo ;/

    ResponderExcluir
  69. Olá, Elaine!
    Comecei um blog recentemente e vários dos seus tutoriais me ajudaram a configurar o layout. Muito obrigada!
    Abraço, Anna

    EscrevendoAsas.com

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…