Foto de perfil com ícones das redes sociais

em 24 de novembro de 2014

Foto de perfil com ícones das redes sociais.png
Olá, blogueiro!
Vou compartilhar com você um código que eu uso em meus trabalhos de personalização de templates.
Este código mostra a foto do autor e os ícones para as redes sociais, em um mesmo gadget. Assim:

Demonstração do tutorial

Quer aprender?
Para começar você precisa ter a foto que deseja usar já editada e no tamanho correto.
Esse tamanho vai depender de você, vai depender da largura total de sua sidebar. Vamos considerar uma coluna lateral com 300px de largura.
Nesse caso a largura ideal da foto é 290px, assim tem espaço para as margens.
Você pode editar sua foto em qualquer editor de imagem, até o Paint serve.

Além da foto você precisa ter os ícones das redes sociais que deseja inserir.
É bom que todos os ícones tenham o mesmo tamanho, ok?
Esse tamanho você define, de acordo com a quantidade de ícones, largura da sidebar, etc
Ao final do post tem o link de um pack com dezenas de ícones grátis que selecionei em sites de imagens gratuitas para você escolher e usar!

Como hospedar imagens?


Com os ícones escolhidos e a foto editada você precisa hospedar as imagens.
Há muitas maneiras de fazer isso, como por exemplo usar sites de hospedagem.
Eu hospedo no próprio blog.
Faça assim: crie um post e deixe-o no rascunho, não publique.
Nesse rascunho carregue todas as imagens que deseja usar. Deixe-as em tamanho original.

Para copiar o endereço de cada imagem faça assim: pare o mouse sobre a imagem e clique sobre ela. A seguir clique na opção Copiar url da imagem (no Chrome).
Este é o endereço da imagem.

Como instalar no blog?


Agora copie este código:

Copiar o código


A seguir edite o código do gadget colocando os endereços e links nos campos especificados.
Deixei marcado em capslock onde colocar o endereço das imagens dos ícones, da sua foto e o endereço de cada perfil seu.
No campo DESCRIÇÃO DE SEU PERFIL AQUI coloque o texto que desejar. Se não quiser texto pode apagar.
Salve, arraste para o topo de sua sidebar e salva as alterações no layout.
Viu que simples?


Como baixar o pack de ícones em formato png, gratuitamente

Para baixar os ícones é muito simples:
Escolha em qual rede social quer compartilhar esse tutorial.
Clique no botão da rede escolhida.
Vai abrir o link para descarregar os ícones.
Compartilhe em uma dessas redes sociais para descarregar o arquivo









Quando abrir a página do Mediafire clique no botão verde e faça o download.
Escolha onde salvar e para concluir descompacte o arquivo. Seus ícones estão prontos para serem usados!


Compartilhe esse post em suas redes sociais; pode ser que ele ajude mais pessoas...

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

9 comentários , comente também!

  1. Elaine, adorei o tutorial! Obrigada por compartilhar, está muito bem explicado e foi muito simples para colocar no blog. Muita saúde para você!

    ResponderExcluir
  2. oi elaine! eu consegui fazer! mas nao ficou os icones lado a lado e sim um embaixo do outro bem grande!! pode me ajudar? www.rebecabetoni.blogspot.com.br

    ResponderExcluir
  3. Ficou ótimo ! vce arrasa ...

    bjin

    http://naiamelo.blogspot.com.br/

    ResponderExcluir
  4. Como faço algo ligeiramente diferente: aparecer apenas a imagem da rede e à frente o link da rede (com reencaminhamento para a rede). Ou seja aparecer o logo e o link alinhados na horizontal

    ResponderExcluir
  5. Elaine, muito obrigada pelo tutorial! Deu super certo :)

    ResponderExcluir
  6. Nossa me ajudou muito você é demais! <3

    ResponderExcluir
  7. Obrigada. Ficou tudo de bom! Eu mudei um pouquinho a ordem dos itens e ficou do jeito que eu queria. Valeu!

    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…