Foto de perfil com ícones das redes sociais - * Blog Elaine Gaspareto *

Foto de perfil com ícones das redes sociais

em 24/11/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...

9 comentários via Blogger
comentários via Facebook

9 comentários:

  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…



No Instagram