Perfil com imagem arredondada e ícones das Redes sociais
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!
39 comentários
Vi teu post sobre parceri *.*
ResponderExcluirnós queremos ser sua parceira flor ;**** bjão!!!!
me envia um email
Excluirrenata_mceles@hotmail.com
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/
ResponderExcluirPatty eu nao entendir muito bem sua pergunta... mas vou dizer por mim: Quando editei a imagem redimensionei pelo tamanho da sidebar... largura
ExcluirOlá 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
Excluirvc 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 =(
ExcluirEu 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
ExcluirFica tão lindo a foto arredondada no perfil, sou super fã rs
ResponderExcluirE 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
Oie isaa, super feliz pela sua visita!
ExcluirQue bom que vc gostou!
Fique ligadinha que sempre posto novidades para blogs
Bjaoo
Adorei o tutorial ! Ai se tivesse visto antes. Não teria me matado pra colocar no meu blog. Seguindo
ResponderExcluirBlog Quem Disse? ♥ Facebook ♥ Instagram
Poxa Renata, obrigada pela visita ;) adorei seu blog.
ResponderExcluirAbraços.
hehehe fica pra proxima neh?!
ExcluirQuando precisar ja sabe onde encontrar <3
Tbm gostei do seu blog *-*
Bjuss
Amei todas dicas e tutorial ♥
ResponderExcluirTem post com seu blog envolvido, vem dar uma olhada! :)
http://doce-meninice.blogspot.com.br/2015/03/5-blogs-que-eu-recomendo.html
Tamy sua linda... vi o post e ja deixei meu comentario!
ExcluirSuper bacana!
Obrigada pela indicação <3
Bjaaao minha linda
Nossa, adoro blog assim. Ele é lindo, parabéns... Acho que vou aderir esse tutorial, muito fofo !
ResponderExcluir*-* 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/
Oiee Maah, ssim essa tuto eh bem facil e simples!
ExcluirQualquer duvida pode me pèerguntar que respondo por aki
Bjao linda e obrigada pelo elogio...
vou conhcer seu blog siim!!
Bjao
Nossa lindo.. vo fazer no meu e te credito *.*
ResponderExcluirSegui direito e ficou lindo e estou usando icones que vc fez ta bom ? beijos
ResponderExcluirMas uma vez me ajudando rs, não consigo sair daqui kk. Beijos !
ResponderExcluirhttp://morandosozinhaesoumae.blogspot.com.br/
Me ajudou mesmo muito... Obrigado!!
ResponderExcluirVisita meu blog Reh http://www.negaotv.blogspot.in/
ADORO O TEU BLOG!
Amei e deu super certo! Estou começando agora no mundo dos blogs e seus tutoriais estão sendo incriveis pra mim!
ResponderExcluirObrigada e beijos ♥
http://blogmaisquemaquiagem.blogspot.com.br/
Usei o tutorial ^^
ResponderExcluirObrigada!! Ficou tão lindo *.*
ResponderExcluirAdoro o teu blog, esta super organizado! como e que e possível colocar a barra preta com os ícones das redes sociais?! obrigada!!
ResponderExcluirSó consegui depois que vi seu post, obrigado pela ajuda, seu blog é impecável.
ResponderExcluirMe ajudou mesmo muito Prof Renata Massa... Obrigado!!
ResponderExcluirOi 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
ResponderExcluirOi Renata segui todos os passos para por a foto, porém ela fica enorme e quadrada. Oq será que estou fazendo de errado?
ResponderExcluirbjos e desde ja agradeço
Oi Renata, parabéns pelo blog. Obrigada pelas dicas, estou usando o template e amando . Beijinhos linda
ResponderExcluirRê!! Obrigada! Consegui alterar a minha foto depois desse tutorial <3
ResponderExcluirRenata, muito obrigada!!! Comecei o blog ontem,e seus tutoriais foram uma ajuda e tanto.. a propósito estou usando um layout seu e só sou gratidão por você ajudar como pode a quem tá começando. Se poder depois da uma passadinha pra ver como ficou, por que eu não saio mais daqui ahhahahaa.
ResponderExcluirhttp://falaiamanda.blogspot.com.br/
obrigadaa <3 me ajudou demais!
ResponderExcluirwww.littlebigme.com.br
Renata, as fotos não carregam no meu blog.. o que eu faço?
ResponderExcluirOI Renata, adorei suas dicas, porém quando carrego a foto no site que voce recomendou ela fica enorme e quadrada. Não consigo que arredonde. O que estaou fazendo de errado?
ResponderExcluirObrigada! Lindo seu trabalho como blogueira.
ResponderExcluirMe ajudou muito, já tinha visto um monte de tutoriais e nada tinha dado certo, muito obrigado mesmo.
ResponderExcluirParabéns pelo excelente blog,sempre encontro muita coisa legal por aqui.
ResponderExcluirTambém gostaria de parceria.Meu e mail é leilamaria266@gmail.com
Blog da Amizade /www.amigosdeleilanina.com.br
Um abraço.
Olá
ResponderExcluirDevo ser um caso perdido viu...ñ conseguir de jeito nenhum!
A foto ñ ficou rwdonda e ficou enorme, os icones das rwdes sociais ñ apareceram. Aff
que pena segui certinho nao aparece nem a foto e nem os icones das redes sociais
ResponderExcluirMande seu comentário, criticas, elogios ou sugestões.
Responderei o mais rápido possível.
Um forte abraço.