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:
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:
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 😏)
Dias online
Postagens
comentários
Obrigada por compartilhar este post Elaine, amei e já apliquei em meu blog.
ResponderExcluirAcessar meu blog = Andreia Paula
Olá Elaine,
ResponderExcluirAdorei 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
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!
ResponderExcluirVocê me ajudou muito! Agradeo demais!!!
ResponderExcluirAmei.. seus tutoriais são os melhores!
ResponderExcluirBeijos
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??
ResponderExcluirBasta escrever no código Youtube em "fa fa-youtube" e copiar o seu link do youtube, fiz e funcionou pra mim.
ExcluirOlá, Elaine!
ResponderExcluirPerdão por te perturbar mais uma vez (risos), mas como faço para colocar o ícone do skoob? Eu já estou com o ícone pronto, mas não consigo adicionar neste código. Não sei como se faz. :(
Luna, nesse gadget não dá pra inserir imagem, os ícones na verdade são fontes especiais e não há fonte para o Skoob.
ExcluirObrigada, Elaine! Só agora entendi esse negócio de fonte.rsrs Coloquei a palavra "book" para deixar pelo menos o ícone/fonte de um livro e o link do skoob nele, assim pelo menos os leitores conseguem ter acesso ao meu perfil no Skoob.
ExcluirBjs!
Olá,gostaria de uma ajudinha para colocar o currículo lattes (Na aba das redes sociais que vc ensina no video) no blogger.
ResponderExcluirGerlan, qual vídeo?
ExcluirOlá Elaine adorei o teu post finalmente consegui alterar o meu perfil sem duvida tu és a minha salvadora um grande beijinhos
ResponderExcluiroii, tudo bem? Eu tentei copiei o link da foto de perfil, mas a foto não aparece! Oq eu faço????
ResponderExcluirRefaça o tutorial e se certifique de estar hospedando a imagem corretamente e copiando/colando o link certo no lugar certo, sem apagar nenhum sinal, letra ou aspa do código.
ExcluirJá verifiquei os termos vou precisar volto depois.
ResponderExcluirJá verifiquei os termos vou precisar.
ResponderExcluir