Perfil com foto descrição e redes sociais | Follow your dreams
Blogosfera

Como colocar perfil com foto (redonda), descrição e redes sociais

Oi pessoal, como estão?

Muitos de vocês tem me perguntando como faço pra deixar o meu perfil assim, com a foto redondinha e abaixo descrição com ícones das sociais. Confesso que pra mim é algo extremamente simples e achava até meio bobo fazer um tutorial, mas eu estudo códigos desde os 11 anos e me lembro bem de como foi difícil no início, então resolvi fazer na esperança de que seja útil para alguém.

Como colocar perfil com foto (redonda) descrição e redes sociais

  •  O código

Para Blogger adicione um gadget de HTML/Java Script e cole o código.
Para WordPress adicione um widget de Texto e cole o código.

Para arredondar a foto:

<center>

<img src=”URL-DA-SUA-FOTO” style=”-moz-border-radius: 1000px; -webkit-border-radius: 1000px; -o-border-radius: 1000px; width:300px; heigh:auto;” />

<br />

Descrição aqui

<br />

<a href=”ENDEREÇO-DA-REDE-SOCIAL“><img src=”ENDEREÇO-DO-ICONE“/></a>

</center>

 

Se você não quiser arredondar a foto:

<center>

<img src=”URL-DA-SUA-FOTO” style=”width:300px; heigh:auto;” />

<br />

Descrição aqui

<br />

<a href=”ENDEREÇO-DA-REDE-SOCIAL“><img src=”ENDEREÇO-DO-ICONE“/></a>

</center>

 

Traduzindo o código

– O número em vermelho é referente à largura da sua fotografia, ajuste como desejar. Não é necessário ajustar a altura, será feito automaticamente.
– A linha em azul é referente à 1 ícone de rede social. Se você quiser colocar mais ícones, deve repetir esse linha novamente abaixo quantas vezes desejar, sempre 1 vez para cada rede social.

 

  • Como colocar imagens?

Hospede as suas imagens (fotografia e ícones sociais) na sua conta do Picasa Web. Depois de hospedar é só clicar com o botão direito na imagem, copiar a URL e substituir no código acima onde é indicado.

Para baixar ícones sociais gratuitos visite a minha categoria de Freebies.

 

  • Não deu certo?

Esse código é muito simples e funciona em qualquer plataforma, não tem como não funcionar, então se não deu certo a explicação é simples: você fez alguma coisa errado. Recomendo que comece o tutorial novamente com bastante atenção.

 

Gostaram do tutorial?
Qualquer dúvida comentem! :)

97 Comentários

  1. Adorei esse tutorial, já coloquei em prática no meu blog, minha única dúvida foi: Como eu colocaria o email nisso? Sou assinante da newsletter e recebi a bandeirinha, mas não sei se email iria colocar da mesma forma, que outro icone de rede social, por ser bem um endereço. Aguardando resposta. Adoro o seu blog :)

      1. Oi Camila, obrigada! Depende da sua intenção. O que você quer que aconteça quando a pessoa clique no ícone do e-mail? Se quer que seja aberto uma página, coloque o link dela. Se quer que seja aberto o método de e-mail que a pessoa usa (Outlook, etc.) coloque apenas o e-mail mesmo no lugar do link.
        Bjs

      1. Bom, no meu também não aparece redonda. Bom eu tenho uma duvida, como eu posso centralizar a área de post no seu template violeta???
        Obrigada, amo seu blog. Você também, poderia dar dicas de edição no programa GIMP, pois é o único que eu tenho acesso.Poderia visitar meu BLOG? E também, gostaria de saber se poderia ensinar a fazer algumas mudança nesse template.

  2. Karol,
    Você voltou a postar, mulher!
    Fiquei com saudades dos seus textos, sempre dou um pulinho aqui para ver as coisas novas e já estava ficando preocupada contigo.

    Sei que não sou uma leitora que comenta muito aqui, mas acredite, não é por falta de interesse, é a timidez mesmo que me cala.

    Quanto ao tutorial, adorei ele, super explicadinho. Eu já havia colocado os meus links e a foto de maneira semelhante no meu blog, mas achei muito boa a ideia do tutorial, lembro bem que foi tenso no começo para conseguir colocar essas coisas no meu cantinho.

    Anyway, passando para dizer um “oi, senti sua falta” e parabenizar pelo tutorial.

    Abraços,
    Nanda.

    1. Oi Nanda, tudo bom?
      Eu entendo como é, também visito vários blogs e quase nunca comento hahah. Mas muito obrigada por deixar seu recadinho aqui, é muito bom saber que alguém “aí do outro lado” gosta do que posto aqui no blog.

      Um beijo, tudo de bom <3

  3. Eu fiz diferente, eu alterei diretamente no html do template usando a tag #profile-img dai fica redondo o widget “perfil do blogger” achei mais fácil, assim se eu alterar a imagem do perfil do Blogger altera já direto no layout não tenho que mudar no widget.

      1. Quando alguém vai comentar no seu blog tem que preencher um formulário com as perguntas de : Nome,Email e etc.Como vc fez para colocar?

        1. Jenniffer, infelizmente não tenho como ensinar assim, precisaria ser um curso e presencial rs
          Recomendo que troque de template pra um assim, seria mais prático.
          Bjs

  4. como voce deixa os posts relacionados redondos???
    poderia fazer isso pra colocar no topo do blog??
    pois a tempos procuro esse tuto.
    obrigada.
    desculpe o incomodo.

  5. Oi! Primeiramente, muito obrigada por todas as dicas e tutoriais incríveis. Tem me ajudado muito! Minha foto também não ficou arredondada. Só arredondou nas pontas, o restante ficou parecido com um retângulo, rs. Tentei fazer várias vezes. Diminui o tamanho da imagem. Aumentei a largura da coluna do blog. Nada :( É uma pena, fica tão gracinha redondinho. Enfim, agradeço de toda forma :D
    Beijos

    1. Oi Jéssica, ao final do href você coloca target=”_blank”.

      Exemplo prático: a href=”LINK” target=”_blank” >

  6. Não consegui :(
    Pode me mostrar com ficaria nesse html?

    |________________________|

    |________________________|

  7. Oi, estou começando o blog agora e adorei a dica! Consegui fazer tudo certinho, mas na hora que clico no link, redireciona para dentro do blog… Como faço para mudar isso?

  8. Oi Karol, amei seu blog e amei esse tutorial *-* eu até consegui fazer a descrição, mas o problema é o seguinte: tanto a minha foto como o ícone das redes sociais não carregam de jeito nenhum eu já tentei em outro navegador, mas não sei se foi algo do álbum do Picassa, poderia me ajudar?

  9. Karolzita (sente a intimidade, haha), preciso de ajuda :p
    Fiz tudo certinho mas minha foto não fica redonda, até aí tudo bem. Mas, desde que fiz essa atualização, sempre que comento em algo, não aparece a minha foto, fica como se eu não tivesse imagem no perfil. E, particularmente eu acho sem graça, quero minha fota aparecendo nos comentários tb. Como ajeito?

  10. Ai que felicidade de ter encontrado esse tutoria, estou tentando deixar a foto redonda desde o começo do blog rsrs que foi em fevereiro. Adorei seu tutorial super fácil e muito bem explicado. Obrigadaaaaa por ter me ajudado ♥

    Beijos e muito mais sucesso

  11. Olá! Parabéns pelo blog, adorei o html, super funcional!!! Já baixei os ícones e estão funcionando perfeitamente!!!! Muito obrigada por disponibilizar!!! Gratidão imensa!! bjoo

  12. Karool ! Vc me ajudou muitooo! Coloquei e ficou tudo certinho, do jeito que eu queria! Vc sempre me ajudando, hein? hahah
    Beijoos ! ♥

  13. Help! o código fica “salvando” eternamente. Pensei que era o tamanho da foto, diminui o tamanho da imagem mas nada. Oq faço? Estou inserindo o html em “footer-1) (Uso blogger).

  14. Hey, Ká! (olha a intimidade da garota kkkk)
    Adorei a dica, me ajudou bastante viu? Amei teu blog, é tudo tão lindo por aqui.. O conteúdo é incrivel. Agora, não consigo te seguir :(
    Beijo da Lou, fica com Deus <3

  15. Oi Karol!!! Seu blog é apaixonante, to encantada! Gostaria de saber se foi tudo feito por você mesmo e como aprendeu tudo isso, o curso e etc. Criei meu blog recentemente mas ainda ando apanhando pra conseguir personalizá-lo, rs. Pretendo fazer tudo eu mesma, então gostaria de fazer algum curso, qual voc^me recomenda?
    Obrigada, lindinha! E parabéns pelo site lindo!

    Beijinhos
    Stéphanie Mascaro.

  16. Oi Karoline no meu blog a imagem não aprece, fica como se a imagem estivesse cortada. Eu só quero colocar a foto com a descrição, sem redes sociais. eu estou usando a plataforma do WordPress.
    Coloquei o código assim:

    Coloquei a descrição que eu queria.

    Tem alguma coisa errada?

    1. Oi Letícia, aqui nos comentários do blog não dá pra colocar código. Você pode me enviar na página “Contato” aqui do blog? :)
      Bjs

  17. Karol! Com todos os seus tutoriais e dicas estou arrumando ele e está uma gracinha! Muito obrigada por disponibilizar todo esse material para nós leitores que não temos muito conhecimento com códigos! Parabéns, seu blog tá lindo.

  18. Oi querida, tudo bem?
    Achei seu por acaso procurando como personalizar um blog usando o blogger. Estou usando esse tutorial, porém o Google desativou o Picasa. Tentei utilizar o código usando o link da foto upada no Google Fotos, mas não deu certo. Não aparece a imagem da foto nem do ícone da rede social, fica aparecendo aquela imagem quando as fotos não carregam. Se eu clicar onde deveria aparecer a imagem do ícone da rede social ele redireciona certinho, só não aparece mesmo as fotos. Se puder dar uma ajuda, agradeço muitíssimo!
    Parabéns pelo blog!

  19. Mulher, eu me tornei sua fã de carteirinha! Já peguei alguns freebies que disponibiliza, li diversos tutoriais, você faz um trabalho incrível! Admirando tudo aqui, super parabéns e um beijo!

Deixe uma resposta