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.
ResponderExcluirOi, Elainte! Tudo bem? Quero agradecer pela ajuda! Só o seu tutorial dá certo. Amo o seu site! Não desista dele, continue assim! Beijos
ResponderExcluirOi,Elaine! Segui a série como personalizar o blog, deu tudo certo.
ResponderExcluirCriei outro blog é um pequeno grupo e artesãos ,só não aparece a biografia do autor digitei ,salvei não aparece.
Onde eu errei?
Já compartilhei nas redes sociais,beijos