Perfil com imagem arredondada e ícones das Redes sociais

02:57


Oie meninas... depois do sucesso do layout Rosa Cute muitas blogueiras me pediram o código que deixa o perfil da blogueira super organizado e bonito, com a imagem arredondada, com a descrição da blogueira e com os ícones das redes sociais...  igual a imagem abaixo:


E logico, não pensei duas vezes e vim correndo ensinar para vocês, antes de mais nada você tem que hospedar sua foto de perfil para obter a URL da imagem, eu utilizo esse site aqui: TinyPic ele é gratuito e bem simples de usar.

Para personalizar seu perfil no blog é muito fácil e não precisa mexer no html do seu blog, basta adicionar o código abaixo em uma caixa Gadget na opção HTML/Java Script:


<center>
<img src="LINK-DA-FOTO-DO-PERFIL" style="-moz-border-radius: 200px; -webkit-border-radius: 200px; -o-border-radius: 200px; width:240px; heigh:auto;" />
<br />
NOME E DESCRICAO DA  BLOGUEIRA AQUI <br />
<center><a href="ENDEREÇO-DA-REDE-SOCIAL-FACEBOOK"><img src="URL-DA-IMAGEM-FACEBOOK"/></a><a href="ENDEREÇO-DA-REDE-SOCIAL-INSTAGRAM"><img src="URL-DA-IMAGEM-INSTAGRAM"/></a><a href="ENDEREÇO-DA-REDE-SOCIAL-TWITTER"><img src="URL-DA-IMAGEM-TWITTER"/></a></center></center>


Entendendo o código:

Substitua onde tem Link da Foto do Perfil pela URL da sua foto
Onde tem: Nome e descrição da Blogueira: Substitua  por um resumo sobre você.
Onde tem Endereço da rede social: você substitui pelo seu link exemplo: www.facebook.com/seuface
E onde tem URL da Imagem Facebook: você coloca o link da imagem que você deseja...
Assim acontece para as outras redes sociais.


Confiram no blog da Karoline, lindos icones para rede sociais: Follow You Dreams 

Super recomendo!!!

Diga NÃO ao PLAGIO!! Seja Criativo e Original!


Bom, pessoal espero que tenham gostado 
Se esse blog tem te ajudado deixe nos comentários para que eu fique sabendo! 

Atenção,  SE INSPIREM mas não copiem!




Você pode gostar também

29 comentários

  1. Vi teu post sobre parceri *.*

    nós queremos ser sua parceira flor ;**** bjão!!!!

    ResponderExcluir
    Respostas
    1. me envia um email
      renata_mceles@hotmail.com

      Excluir
  2. Olá eu adorei o post já há algum tempo que queria colocar a foto de perfil maior mas não consigo depois diminuir ligeiramente a largura como faço isso? http://ocadernodasideiasparvas.blogspot.pt/

    ResponderExcluir
    Respostas
    1. Patty eu nao entendir muito bem sua pergunta... mas vou dizer por mim: Quando editei a imagem redimensionei pelo tamanho da sidebar... largura

      Excluir
    2. Olá Renata a imagem ficava larga em relação a largura da barra mas resolvi o problema pondo a barra mais larga.. adorei os icones só é pena não ter o do youtube

      Excluir
    3. vc pode repetir os codigos das redes sociais quantas vezes quiser, subistituindo apenas os links da imagem e da rede social... eh infelizmente os icones do youtube q tenho sao poucos e diferentes dos conjuntos q postei, nao ficaria padrao =(

      Excluir
    4. Eu consegui um que é uma claket mas tem de ficar maior que os outros todos porque do mesmo tamanho fica desfocado :( Eu repeti para o youtube e para o google + só não usei os teus icones porque os rosa são muito claros e não gostei muito de ver no meu blog por causa do fundo

      Excluir
  3. Fica tão lindo a foto arredondada no perfil, sou super fã rs
    E que ícones fofos, o étnico é uma lindeza, bem diferente, nunca tinha visto <3
    Seu blog é super útil Renata, já estou seguindo!

    VOTE EM MIM: Isadora Adora
    Isadora Adora | www.isadoraadora.com

    ResponderExcluir
    Respostas
    1. Oie isaa, super feliz pela sua visita!
      Que bom que vc gostou!
      Fique ligadinha que sempre posto novidades para blogs
      Bjaoo

      Excluir
  4. Adorei o tutorial ! Ai se tivesse visto antes. Não teria me matado pra colocar no meu blog. Seguindo

    Blog Quem Disse?FacebookInstagram

    ResponderExcluir
  5. Poxa Renata, obrigada pela visita ;) adorei seu blog.
    Abraços.

    ResponderExcluir
    Respostas
    1. hehehe fica pra proxima neh?!
      Quando precisar ja sabe onde encontrar <3
      Tbm gostei do seu blog *-*
      Bjuss

      Excluir
  6. Amei todas dicas e tutorial ♥
    Tem post com seu blog envolvido, vem dar uma olhada! :)
    http://doce-meninice.blogspot.com.br/2015/03/5-blogs-que-eu-recomendo.html

    ResponderExcluir
    Respostas
    1. Tamy sua linda... vi o post e ja deixei meu comentario!
      Super bacana!
      Obrigada pela indicação <3
      Bjaaao minha linda

      Excluir
  7. Nossa, adoro blog assim. Ele é lindo, parabéns... Acho que vou aderir esse tutorial, muito fofo !
    *-* agradeço sua visita ao meu blog, nossa adorei ter encontrado o seu blog ele é muito top. Parabéns, você é muito criativa e continue com seu entusiasmo ao ajudar as pessoas. Tudo de bom !

    Seguindo com certeza !

    http://seilumine.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oiee Maah, ssim essa tuto eh bem facil e simples!
      Qualquer duvida pode me pèerguntar que respondo por aki
      Bjao linda e obrigada pelo elogio...
      vou conhcer seu blog siim!!
      Bjao

      Excluir
  8. Nossa lindo.. vo fazer no meu e te credito *.*

    ResponderExcluir
  9. Segui direito e ficou lindo e estou usando icones que vc fez ta bom ? beijos

    ResponderExcluir
  10. Mas uma vez me ajudando rs, não consigo sair daqui kk. Beijos !

    http://morandosozinhaesoumae.blogspot.com.br/

    ResponderExcluir
  11. Me ajudou mesmo muito... Obrigado!!
    Visita meu blog Reh http://www.negaotv.blogspot.in/

    ADORO O TEU BLOG!

    ResponderExcluir
  12. Amei e deu super certo! Estou começando agora no mundo dos blogs e seus tutoriais estão sendo incriveis pra mim!
    Obrigada e beijos ♥
    http://blogmaisquemaquiagem.blogspot.com.br/

    ResponderExcluir
  13. Adoro o teu blog, esta super organizado! como e que e possível colocar a barra preta com os ícones das redes sociais?! obrigada!!

    ResponderExcluir
  14. Só consegui depois que vi seu post, obrigado pela ajuda, seu blog é impecável.

    ResponderExcluir
  15. Me ajudou mesmo muito Prof Renata Massa... Obrigado!!

    ResponderExcluir
  16. Oi Flor! Não sei o que estou fazendo de errado, mas o link da foto não vai :(. Usei o TinyPic e o link não está funcionando

    ResponderExcluir
  17. Oi Renata segui todos os passos para por a foto, porém ela fica enorme e quadrada. Oq será que estou fazendo de errado?
    bjos e desde ja agradeço

    ResponderExcluir
  18. Oi Renata, parabéns pelo blog. Obrigada pelas dicas, estou usando o template e amando . Beijinhos linda

    ResponderExcluir

Mande seu comentário, criticas, elogios ou sugestões.
Responderei o mais rápido possivel.
Um forte abraço a todos vocês!

Contrate o Blog

Meu blog faz parte do Modatrade


Renata Massa
Renata Massa
Modatrade | A vitrine dos blogs de moda
Modatrade | A vitrine dos blogs de moda