Tutorial: Perfil + Redes Sociais

em

24 abril 2013


Depois que fiz meu primeiro layout free, divulguei em alguns lugares... No grupo do Depois dos Quinze ganhei muitos elogios, e até algumas garotas já estão usando! Além disso, em um dos comentários, me perguntaram como eu fazia o perfil com links das redes sociais em icons. Como não vejo problema em dividir códigos com ninguém (meu problema é a explicação), resolvi fazer o primeiro tutorial aqui do blog!



Para ilustrar o que eu estou fazendo, irei utilizar nos exemplos o meu perfil!

O código:

<div class="separator" style="clear: both; text-align: center;"><img border="0" src="LINK DA IMAGEM AQUI" /></a></div>
<div style="text-align: center;"><span style="font-family: Georgia;">SEU PERFIL AQUI</span></div><div class="separator" style="clear: both; text-align: center;"><a href="mailto:SEU EMAIL"><img border="0" src="IMAGEM DO EMAIL" /></a><a href="LINK REDE SOCIAL"><img border="0" src="IMAGEM REDE SOCIAL" /></a></div>

O que está em Vermelho: Você coloca o link da sua imagem de perfil.
Ex:
http://2.bp.blogspot.com/-ktb-Hl_gc-k/US_TKy2b59I/AAAAAAAAEfc/ra0XpVmjGZs/s1600/sono.png

O que está em Itálico: É a fonte utilizada para a descrição do seu perfil, você pode altera-la.
Ex: Utilizei a Georgia.

O que está em Azul: Nesse local você escreve o seu "quem sou eu".
Ex: Maryana, 18 anos, blogueira...

O que está em Verde:
1. SEU EMAIL (você coloca o seu e-mail)
Ex: maryanasales@live.com

2. IMAGEM DO EMAIL (aqui é que vai o link do icon que você vai usar)
Ex:
http://2.bp.blogspot.com/-pniwb86fopY/US_XrW4X5XI/AAAAAAAAEgg/ueo85VWjcJQ/s1600/email.png

PS: Se você não quer um icon que redirecione o seu e-mail é só retirar essa parte do código:
<a href="mailto:SEU EMAIL"><img border="0" src="IMAGEM DO EMAIL" /></a>

 O que está em Rosa:
1. LINK DA REDE SOCIAL (você coloca o seu link de uma rede social)
Ex: https://www.facebook.com/maryanasales

2. IMAGEM REDE SOCIAL (você coloca o link do icon que você quer usar pra essa rede social)
Ex:
http://2.bp.blogspot.com/-VtXVqx4gY_I/US_W_V2x6GI/AAAAAAAAEfo/LSeIbluJrnc/s1600/face.png

PS: Para colocar mais icons de outras redes sociais é só adicionar ANTES da última </div> esse código:
<a href="LINK REDE SOCIAL"><img border="0" src="IMAGEM REDE SOCIAL" /></a>

Exemplo do código do meu perfil com e-mail, facebook, twitter, tumblr e youtube:

<div class="separator" style="clear: both; text-align: center;"><img border="0" src="http://2.bp.blogspot.com/-ktb-Hl_gc-k/US_TKy2b59I/AAAAAAAAEfc/ra0XpVmjGZs/s1600/sono.png" /></a></div>
<div style="text-align: center;"><span style="font-family: Georgia;">Maryana, 18 anos, blogueira... </span></div><div class="separator" style="clear: both; text-align: center;"><a href="mailto:maryanasales@live.com"><img border="0" src="http://2.bp.blogspot.com/-pniwb86fopY/US_XrW4X5XI/AAAAAAAAEgg/ueo85VWjcJQ/s1600/email.png" /></a><a href="https://www.facebook.com/maryanasales"><img border="0" src="http://2.bp.blogspot.com/-VtXVqx4gY_I/US_W_V2x6GI/AAAAAAAAEfo/LSeIbluJrnc/s1600/face.png" /></a><a href="https://twitter.com/maryanasales"><img border="0" src="http://1.bp.blogspot.com/-a127CnE1Bjg/US_XABE2XdI/AAAAAAAAEfw/AwS15egXeTw/s1600/twitter.png" /></a><a href="http://iniciodeinverno.tumblr.com/"><img border="0" src="http://3.bp.blogspot.com/-XFk-adpobdM/US_XBZVODOI/AAAAAAAAEf4/_73-L6iwst8/s1600/picons45.png" /></a><a href="http://www.youtube.com/user/videosdamary/"><img border="0" src="http://2.bp.blogspot.com/-YPfW_OCKVjk/US_XB1pQOUI/AAAAAAAAEgA/GLMbBmyEZpE/s1600/yt.png" /></a></div>


Instalando:
Painel do Blogger > Layout > Adicionar um Gadget > HTML/JavaScript
No campo conteúdo, você adiciona o código completo.
Salve e posicione onde quiser no seu layout!

Dicas:
Para seu perfil ficar mais fofinho, edite a imagem antes de colocar. Uma ideia é colocar borda, ou transforma-la em "Polaroid".
Os icons que eu normalmente uso, encontro aqui.

Espero que entendam o tutorial, eu não sou muito boa com explicações! Qualquer dúvida deixe nos comentários ou no meu Ask.

58 comentários

Olá querido leitor,
Gostou dessa postagem? Que tal compartilhar sua opinião, ou deixar sua dúvida?
Espero seu comentário!

Beijinhus ;3

  1. nossa super legal o tuto! Amei o lay free! Acho que usarei em breve

    ResponderExcluir
    Respostas
    1. Que bom que gostou! Se usar o lay avisa pra eu ver como ficou no seu blog :D

      Beijinhos

      Excluir
  2. Mary, adoooorei, estou seguindo lá no face e aqui também !! Retribui !?
    www.facebook.com/MeninaaSweet
    http://meninaasweet.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Já retribui, adorei o blog e a fan page ;))
      Obrigada por visitar aqui! Beijoss

      Excluir
  3. Oi linda, affffffff amei demais a dica tudo que eu queria .. mas eu como coloco no word press ?

    ResponderExcluir
    Respostas
    1. Oi! Então, você vai em Aparência > Widgets > Texto
      Aí lá você adiciona o código que eu passei :)

      Espero que tenha ajudado, beijinhus

      Excluir
  4. Respostas
    1. Sim, você pode me mandar um email pedindo orçamento: maryanasales@live.com

      Excluir
  5. Oi adorei as dicas,mas quando fui usar o layout,não deu certo :/ apareceu isso: Não foi possível carregar a visualização do modelo: Attribution widget is missing
    E como eu tô começando agora nesse mundo da blogosfera,não sei o que fazer.

    ResponderExcluir
    Respostas
    1. Isso aparece pois eu já retirei o widget de créditos do blogger. Esse erro ocorreu com algumas meninas, mas depois salvaram normal. Tenta excluir ele antes de instalar o layout ou algo assim. Ve se dá certo, senão eu tento te ajudar. :)

      Beijinhus

      Excluir
  6. Mary, adorei seu blog, os seus layouts e tudo mais, eu apenas queria saber como você faz pra criar(se é que você mesma cria os seus) ou onde você encontrar essas imagens de ícone fofinhas, por exemplo e até mesmo as imagens que ficam no início dos blogs, a título de curiosidade, valeu, beijinhos.

    ResponderExcluir
    Respostas
    1. Que bom que gostou *-*
      Eu uso a programação do blogger e adiciono imagens e css no código do layout.
      Os ícones eu normalmente pego aqui: http://www.iconfinder.com/
      As imagens que uso no topo dos blogs eu encontro na internet mesmo, algumas são tão antigas que eu achava em comunidade do orkut que disponibilizava essas coisas HAHOIHOEAI
      Imagens de meninas eu encontro várias no google imagens(Pesquisa como illustration girl).

      Espero ter ajudado, as vezes passo horas procurando imagens certas pra cada blog...

      Beijinhus

      Excluir
    2. Ajudou sim!! muito, muito obrigada!! ^^
      Parabéns pelo blog e por compartilhar seu conhecimento!!!

      Excluir
    3. Que ótimo! De nada :3
      Magina ahoieihahoia bjinhus

      Excluir
  7. Nossa! Me ajudou muitooooo mesmo *-* Muitíssimo obrigada :D

    ResponderExcluir
    Respostas
    1. De nada! Qualquer coisa que quiser saber, pergunte que se eu souber, faço um tutorial =)

      Beijinhus

      Excluir
  8. Amei a dica, florzinha! Sempre desejei isso, mas não sabia como fazer!
    Obrigada por compartilhar! Em breve, farei no meu! =D

    ResponderExcluir
    Respostas
    1. Que bom que ajudou você!
      Estou pensando em outros tutoriais pra postar aqui, to aceitando sugestões =)

      Beijinhus

      Excluir
  9. Parabéns linda,amei seu post,consegui colocar do jeito que eu queria! *-*
    Um grande beijo :*
    http://blogmodaeafiins.blogspot.com.br/

    ResponderExcluir
  10. Parabéns pelo blog e obrigada pelo tuto tava precisando....

    100000000 beijos para você *-*

    mysplit-personality.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigada <3
      Vi que além do tutorial, você usou o layout free que disponibilizei *-* Adorei!

      Beijinhus

      Excluir
  11. Este comentário foi removido pelo autor.

    ResponderExcluir
  12. Sou péssima com essas coisas, adorei as dicas parabéns , mas eu não consegui colocar o icon do instagram e nem a foto, ainda to no começo e não sei usar direito pf se puder me ajude

    ResponderExcluir
    Respostas
    1. primeiro você tem que hospedar a foto e o icon em algum lugar (pode ser em uma postagem rascunho do blog).

      Dai você copia os links dessas imagens e substitui nos lugares certos do código que passei. (sugiro que cole o codigo no bloco de notas e faça a alteração lá).

      Depois copia o código e cola onde você quer que ele fique. Se for na lateral, adicione um Gadget HTML/JavaScript e cole o código na caixinha.

      Então é só salvar :)

      Excluir
  13. Este comentário foi removido pelo autor.

    ResponderExcluir
  14. Obrigada ajudou muitoo ! Visita meu blog http://modazulu.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Magina! E que bom que ajudou você =)

      Beijinhus

      Excluir
  15. Fofa se eu te colocar como ADM do meu blog vc coloca pra mim?
    Mais eu preciso de tudo em dobro

    ResponderExcluir
    Respostas
    1. Oi, entre em contato comigo por e-mail, assim podemos conversar melhor e eu te ajudo a colocar tudo direitinho =)

      Beijinhus e desculpa a demora!

      Excluir
  16. Respostas
    1. Olá! Os icons que eu normalmente uso, pego aqui: https://www.iconfinder.com/
      Espero que ajude!

      Beijinhus

      Excluir
  17. Oi, eu baixei o icon do instagram, e onde posso hospeda-lo já que a imagem não fica aparecendo? e nem a do meu perfil?

    ResponderExcluir
    Respostas
    1. Você pode hospedar no próprio blogger! É só criar uma postagem de rascunho, carregar as imagens nela e depois pegar o link de cada uma.
      Ou também hospedar por esse site: http://tinypic.com/

      Espero ajudar,
      Beijinhus

      Excluir
  18. Maryana não estou conseguindo por os links tem que ser todas as fotos da internet ?

    ResponderExcluir
  19. Não apareceu as imagens =/ Já peguei milhares de tutoriais sobre isso, há tempos que estou tentando colocar as redes sociais no perfil, mas não consigo.

    ResponderExcluir
    Respostas
    1. As imagens você tem que hospedar em algum lugar (tipo o blogger)
      Beijinhus ;)

      Excluir
  20. Usei os mesmos ícones que vc usou (espero que não se importe, haha).
    brigadão pela dica! seguindo seu blog...
    http://livrolatraapaixonado.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Tudo bem Arthur, esses icons são free :)
      Obrigada você, bjinhuss

      Excluir
  21. Pronto
    http://acadapassoumnovocaminho.blogspot.com.br/

    ResponderExcluir
  22. Oi! Gostaria de saber: como eu posso colocar o "Leia mais" no perfil?
    Obrigada!
    PS:. Obrigada pelo tutorial ajudou muito! Agora só falta encontrar icons que combinem com o meu tema!!
    www.contracapas.blogspot.com

    Beijos

    ResponderExcluir
  23. Eu fiz tudo certo só nao entro a minha foto e os icones ficaram mt grande me ajuda.

    ResponderExcluir
  24. conseguiii
    http://adriellirosa.blogspot.com.br/
    mt obrigada ♥

    ResponderExcluir
  25. Oii, adorei o tutorial, estou te seguindo, segue de volta?
    http://duringthefifteenyears.blogspot.com.br/

    ResponderExcluir
  26. Ajudou muito. Sempre "travo" em relação a códigos e tudo, mas pela primeira vez na vida aqui consegui aprender. hahaha Obrigada, salvou uma blogueira iniciante! hahaha
    Beijos!

    ResponderExcluir
  27. Oii Mary :3 eu consegui.. muito obrigada..
    mas tem uma coisa.. o ícone do facebook ficou certinho , mais o do twitter que deveria ficar ao lado do facebook ficou uma linha em baixo ( si é que vc me entendeu x3 ) pq ficou assim ? :/ me ajuda ~

    ResponderExcluir
  28. Oi, adorei o tutorial, me ajudou muito !

    ResponderExcluir
  29. Está muito lindo, mais eu não consigo salvar :(

    ResponderExcluir
  30. Ameii , Consegui instalar tudo certinho , obg pelo tutorial :)

    ResponderExcluir
  31. Este comentário foi removido pelo autor.

    ResponderExcluir
  32. Este comentário foi removido pelo autor.

    ResponderExcluir