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.
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 Finder – http://www.iconfinder.net/.
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:
- Free Social Network Icons and Bullets
- Social Networking Icons
- Handycons – a free, hand drawn social media icon set
- Handycons 2 – another free hand drawn icon set
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:
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.
Nossa esse site de icones que você indicou é show de bola. Sempre procurei algo assim.
Ó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!
Esse tutorial é para wordpress? Abraços
@Victor,
Serve para WordPress também.
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.
Muito obrigado! Marcos Lemos você é demais! Graças as suas dicas o visual do meu blog fica cada dia mais e mais atrativo!
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 !
Teremos um tutorial ensinando a fazer isso. Em breve, basta acompanhar nossas atualizações.
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!
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?
@MarcoAA_M,
Até onde sei, aceita sim.
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.
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.
Descobri o problema: era na configuração do perfil do facebook. Agora deu certo.
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!
Fantásticas as suas dicas! Muito obrigada! Tudo muito bem explicado e fácil!
Suas dicas neste tutorial e em outros espaços do ferramentasblog me ajudaram muito a montar o meu blog. Obrigado!!!
Demais esses codigos que você colocou
agora ate eu to conseguindo coloca links com imagens
vlw
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.
Pingback: Adicionar botão "Curtir" (Like) do FaceBook nos artigos do Blog – Blogger e Wordpress | [ Ferramentas Blog ]
Cara, parabéns pelo blog.
Muito útil, funcional, prático, ótimo para pessoas (como eu) que não sabem muito.
Abraço
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!
Obrigado pela orientação!
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…
amigão muito obrigado seu artigo me foi muito útil!
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!!!
nossa!! amei esse guia viu, tava me batendo pra tentar fazer isso mas vocês deixam tudo mais fácil!! ja melhorei bastante meu blog com as dicas de vocÊs!!
Nossa. Mais uma dica que ficou linda no meul blog. Obrigado mesmo, fico muito empolgado quando esses recursos são implementados na minha página!
Sou novata nesse mundo de blogs e seu post me ajudou MUITO! Obrigada!
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?
Obrigado *-* Só com isso dá pra fazer muita coisa ♥