Como criar menu com ícone de Redes Sociais e outras opções

icones-paralelos Esse tutorial será pra ajudar quem quer criar seu próprio modelo de lista de ícones das redes sociais que mais usa em seu blog. Também serve para quem quer aprender a colocar link em imagens e como adicionar isso em qualquer parte do Blog. O modelo que vamos seguir é o que uso no rodapé de todos os artigos do [ Ferramentas Blog ]. O limite é sua criatividade.

Siga o [Ferramentas Blog] no Youtube
Clique no botão ao lado para se inscrever no nosso canal.



Note o rodapé dessa e de todas as postagens desse blog e você verá que temos ícones de redes sociais digitais e forma de contato e Feed dessas páginas. Isso é algo bem simples de fazer e basicamente consiste apenas em uma imagem e um link que redirecione para o serviço desejado.

Quer colocar uma lista de ícones exatamente igual à esta que estou usando, com ícone para o Feed, Twitter, Facebook e formulário de contato? Basta adicionar o seguinte código em qualquer parte de seu blog, até mesmo em um gadget de sua barra lateral (sidebar):

<!-- Icones sociais inicio -->
<div align='right'>
<table border='0' cellpadding='2' cellspacing='0' width='260'><tbody>
<tr>
<td width='65'><a href='URL_do_seu_FEED' title='Assine nosso Feed'><img src='http://www.ferramentasblog.com.br/imagens/icone-RSS.png'/> </a></td>
<td width='65'><a href='URL_seu_PERFIL_TWITTER' title='Para seguir no Twitter'><img src='http://www.ferramentasblog.com.br/imagens/icone-twitter34.png'/></a></td>
<td width='65'><a href='URL_seu_PERFIL_FACEBOOK' title='Amigos do FaceBook'><img src='http://www.ferramentasblog.com.br/imagens/icone-facebook.png'/></a></td>
<td width='65'><a href='URL_FORMULARIO_CONTATO' title='Entre em contato conosco'><img src='http://www.ferramentasblog.com.br/imagens/icone-contato.png'/></a></td>
</tr>
</tbody></table></div>
<!-- Icones sociais final -->

Só altere o que foi indicado de vermelho. Para poder criar o seu próprio menu com ícones de suas redes e personalizar o modelo acima, veja o seguinte tutorial.

A primeira coisa a fazer é:

Encontrar ícones para seu Blog

Eu uso um serviço gratuito e simples onde você pode procurar por todo tipo de imagens em forma de ícones. Trata-se do Icon Finderhttp://www.iconfinder.net/.

icon-finder-logo

Faça uma busca pela seguinte palavra-chave “icon social media” por exemplo, para encontrar ícones de redes-sociais. Se você adicionar o nome específico, como “icon social media twitter“, pode encontrar só o que tem relação com o Twitter.

Você também pode procurar por downloads de pacotes de ícones que existem disponíveis em vários lugares. Aqui tem outras opções:

Como criar links em imagens?

Toda imagem pode ser um link para qualquer URL que você queira. Para isso basta saber um mínimo de HTML que vou mostrar aqui.

Passo 1:

Ao baixar uma imagem que queira usar em seu blog você vai precisar enviar para algum host, um local de hospedagem. Você pode usar o PicasaWeb que é padrão do Blogger (clique aqui para saber como usar) e que é gratuito.

Passo 2:

Você vai precisar da URL, do endereço de onde ficou hospedada a imagem (conforme descrito aqui). Agora adicione essa imagem que você colocou num host com o seguinte código HTML.

<img src=”URL_DA IMAGEM“/>

Você vai trocar o que está marcado de vermelho para URL da imagem onde você hospedou. Só esse código já adiciona uma imagem em qualquer lugar de seu blog, até mesmo dentro de uma postagem. Para transformar a imagem em um link é o que veremos no próximo passo.

Passo 3:

Todo link é criado pelo seguinte código HTML:

<a href=”URL_de_DESTINO“>O que será transformado em link</a>

O código é o que está em negrito junto com o que está de vermelho. O que indicamos de vermelho é o endereço de destino para onde será direcionado quem clicar seja no texto ou na imagem que foi transformado em link. O texto que coloquei no exemplo pode ser trocado por qualquer coisa. Agora só falta junta os dois códigos para transformar uma imagem em link.

Passo 4:

Para juntar os dois é bem simples: basta colocar o código da imagem cercado pelo código do link, da seguinte forma:

<a href=”URL_de_DESTINO”><img src=”URL_DA IMAGEM”/></a>

Onde o que está de verde é o código de criar link e o que vemos em rosa é o código de adicionar imagens. Assim a imagem que ficar dentro do código de links passa a ser clicavel e direcionará para a URL desejada. Foi exatamente o que fiz para o modelo de ícones que estou usando aqui.

Dessa forma você poderá criar o que desejar com links e imagens para personalizar seu blog e seus ícones.

Recomendamos outras opções:

38 Comentários

  1. Marcos
    Outro tutorial muito útil. Hoje em dia, blog que não tenha botões de partilha nas redes sociais não consegue grande divulgação.

    Responder

  2. Ótimo o artigo, estou mexendo com isso agora em um novo layout. Seria legal ensinar como posicionar os icones de social media dentro do cabeçalho do blog por exemplo! 🙂

    Responder

  3. Criei um gadget no meu blog com o script contendo os ícones sociais. No futuro, pretendo alterar a imagem dos ícones, pois, não gosto dos efeitos de transparência, mas enquanto não encontro os elementos de minha preferência, fico com a sugestão do Ferramentas Blog. Obrigado, Hordones.

    Responder

  4. Muito obrigado! Marcos Lemos você é demais! Graças as suas dicas o visual do meu blog fica cada dia mais e mais atrativo!

    Responder

  5. Marcos, de mais as dicas! Sou super fã! Só me ajuda em um detalhe: como coloco os ícones no final de cada post??
    Abraço !

    Responder

  6. Sem palavras. Além de apreder a colocar esta lista de icones de rede socialjá armazenei alguns icones na minha conta no picasa para utilizar no futuro, isto aprende em outro artigo seu. Por isso e outros pontos que vi busquei auxílio o ferramentas blog está no meu topo de ajuda na web.

    Paz e saúde em Cristo!

    Responder

  7. Sempre quis saber alinhar esses ícones mas não sabia como. Aprendi com o post.

    Parece que o wordpress não aceita o formato .ico ou é impressão minha?

    Responder

  8. Tentei hoje pela manhã outra vez.
    Não deu certo nem com as modificações propostas em vermelho, nem mudando o endereço ferramentas…para blogstorias…
    Aguardo ajuda.

    Responder

  9. Marcos, não entendo o que está acontecendo, o direcionamento do facebook não dá certo de jeito nenhum. Os outros três estão perfeitos. Fiz tudo certinho, eu creio.

    Responder

  10. Adorei ter conseguido finalmente colocar links nas imagens das postagens! Queria colocar uma imagem para ser o botão de download de uma postagem e não conseguia e vocês me "salvaram" rsrsrs. Muito Obrigada!

    Responder

  11. Eu consegui!!! Meu blog tah ficando tão lindo (e organizado)! Agora, segundo as suas dicas, quando eu visito outros blogs eu digo:nossa, que blog bagunçado!!!…rsrsrs.
    Muito obrigada!!! Tô in love com o ferramentas blog.

    Responder

  12. Pingback: Adicionar botão "Curtir" (Like) do FaceBook nos artigos do Blog – Blogger e Wordpress | [ Ferramentas Blog ]

  13. Cara, utilizei o seu tutorial e deu tudo certo! Adorei o site Icon Finder. Obrigado!

    Gostaria de agradecer dando uma dica aqui. Se adicionarmos o trecho (target=”_blank”) antes do title, o link abrirá em uma nova aba ou janela. =]

    Acho interessante pq assim a pessoa não sai do blog ao clicar em algum dos ícones.

    Abraço. Sucesso!

    Responder

  14. Parabens o seu codigo foi o unico ke deu certo no meu template,tenho tentado a dias e ate mesmo tenho dormido tard..outra coisa interessante os links de icones desenhado a mao interessante,adoro arte tbmmm…obrigado e continue sempre assimm…

    Responder

  15. Olá Marcos,

    Somente uma observaçao: no seu formulario para os icones, na notificação do E-MAIL voce esqueceu de colocar a estrutura MAILTO:+endereço de e-mail

    Mais otimas dicas cara, parabéns!!!

    Responder

  16. Olá pessoal do ferramentas,bom entendo um pouco de html faço os meus scripts e dão certo até agora.Só que utilizei esse código que tu passou para os ícones das redes.Só que não apareceu as imagens dos ícones novos que hospedei no Picasa.Peguei as URL dos ícones que hospedei lá e usei no teu código onde tem o endereço dos teus ícones.E não apareceu as imagens.Logo abaixo tu explica como criar um com nossos próprios ícones hospedados mas não deu para entender pelo seguinte:No teu código pronto que tu pede somente para trocar os direcionamentos ou seja o que está em vermelho, também pode ser trocado as URL dos teus ícones não pode?..Só que na minha página não funcionou..só funciona com os teus ícones e eu queria trocar pois achei um pouco grande para o meu cabeçalho..Poderia dar uma esclarecida melhor?

    Responder

  17. Tive um probleminha..
    durante a codificação foi tudo certo, instalação perfeita.. mas tive problema com os icons
    salvei as imagens em .ico, que dizia ser o recomendado para Windows. Mas ao tentar fazer upload para o Picassa, as imagens com esse formato não carregaram. Então, fui ao site mais uma vez e salvei em .png. Deu certo, porém, no blog, os icons não abrem, ficam só assim: http://img153.imageshack.us/img153/3691/iconsd.jpg o que posso fazer??

    Responder

    • Não é “sacanagem” se tem o botão “X” no canto superior direito do popup para a pessoa fechar, sem precisar se cadastrar, permitindo que o conteúdo fique acessível.
      Mas tem gente que tem preguiça de abrir os olhos para ver todas as possibilidades e prefere xingar, fazendo papel de idiota no blog alheio.

      Responder

  18. Olá, Marcos!
    Estou reorganizando o meu blog e resolvi colocar mais ícones no menu que já tinha feito anteriormente, mas fui descobrir as novas mudanças do Picasa Web para o Google Photos que ainda não sabia e percebi que não dá mais para usar uma URL e fazer a hospedagem da imagem do ícone.
    Alguma nova sugestão?
    Agradeço a atenção!

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.