Foto de perfil arredondada e ícones de redes sociais para blog - * Blog Elaine Gaspareto *

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

em 01/11/2017

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 😏)


2 comentários via Blogger
comentários via Facebook

2 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

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…



Visualizações

Contando...

Dias online
Postagens
comentários