Foto de perfil arredondada e ícones de redes sociais para blog - Elaine Gaspareto- Dicas para blogs e inspirações para a vida

Foto de perfil arredondada e ícones de redes sociais para blog

Publicado em 01/11/2017

Tempo de leitura:

Foto de perfil arredondada e ícones de redes sociais para blog

Você tem um blog?
Quer aprender um código bem simples e legal, que redimensiona sua foto de perfil, a deixa redondinha e ainda mostra, abaixo dela, os ícones de suas redes sociais preferidas?
Assim:


Demonstração do tutorial


Então vem comigo, vou te mostrar os paranauês todos!

Para começar escolha a foto que deseja usar. Recomendo uma com o plano mais fechado já que o código vai capturar a área mais central da foto para arredonda-la.
Uma foto mais ou menos assim:


Agora hospede sua imagem.
Faça assim: abra um novo post em seu blog e carregue nele a foto de perfil que deseja. Deixe em Tamanho original e a seguir pare o mouse sobre ela. Clique com o botão direito e escolha  Copiar endereço do link (estou no Chrome, ok?).
Este é o endereço de sua imagem.

A seguir vá ao painel administrativo do blog onde deseja inserir o gadget e clique em Layout. Clique então em Adicionar um gadget e dentre as opções que surgirem escolha HTML/JAVASCRIPT.
Na caixa que expandir cole o código abaixo:


Copiar o código


No campo onde marquei ENDEREÇO DE SUA FOTO coloque, claro o endereço da foto que ensinei como hospedar acima.
Nos campos destacados em CAPSLOCK coloque o endereço de cada rede social sua.
Se quiser excluir alguma basta apagar o trecho correspondente a ela no código e ela sumirá.
Dá pra alterar o grau de arredondamento da foto, aumentar ou diminuir o tamanho das fontes do texto e dos ícones, trocar a cor dos [ícones, etc...
Vá mexendo no código, descobrindo o que cada alteração causa. Acredite: é simples e divertido!

Depois de pronto, salve, arraste para onde deseja que fique (sugiro o topo da coluna lateral) e salve as alterações do Layout.
Se tudo deu certo seu perfil já aparece.
Legal, né?

Importante:
Na página de códigos deixei o código da fonte especial que gera os ícones; caso não a tenha instalada em seu blog precisará fazer isso, ok? Basta copiar o código que disponibilizei lá e colar abaixo de <head>, que está bem como começo do seu código-fonte.

E se quiser me dar uma força compartilhe este post em suas redes sociais...
Vai... nunca te pedi nada... (mentira, peço sempre, sou dessas 😏)







6 comentários via Blogger
comentários via Facebook

6 comentários:

  1. Obrigada por compartilhar este post Elaine, amei e já apliquei em meu blog.

    Acessar meu blog = Andreia Paula

    ResponderExcluir
  2. Olá Elaine,
    Adorei sua postagem, não resisti e já fiz em meu blog, ficou muito mais legal do que o perfil padrão que ele estava antes... sem falar que tem os ícones para as redes sociais... perfeito!!!
    Abraços e muito sucesso!!
    Litta Santos

    ResponderExcluir
  3. Amei suas dicas! Ainda estou trabalhando muito em meu blog e tudo que fiz até agora, foram através das suas preciosas dicas! Obrigado por tudo!

    ResponderExcluir
  4. Você me ajudou muito! Agradeo demais!!!

    ResponderExcluir
  5. Amei.. seus tutoriais são os melhores!
    Beijos

    ResponderExcluir
  6. Oi Eliane o seu blog me ajuda muito. Estou aprendendo muito com você. Se não for pedir demais, não tem o do Youtube, você pode me ajudar??

    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…