Como Criar uma Lista de Ícones de Redes Sociais

Olá pessoal, hoje vamos aprender a como criar o seu próprio modelo de uma lista de ícones de redes sociais para colocar em seu blog. O mais aconselhado é você colocar na barra lateral (sidebar) do blog, pois assim terá uma visualização melhor de seus visitantes e garantindo mais cliques nos botões e assim conseguindo seguidores para o seu Twitter, uma "curtida' em sua página no Facebook e se inscrever no Feed do seu blog.

Os modelos de ícone serão os mesmo da imagem que está ilustrando este post, mas você pode mudar. Mais adiante desse artigo, irei dar uma dica de um site que disponibiliza estes ícones de alta qualidade. Então, vamos aprender?


O código é simples de se estender, veja abaixo o código:

<!-- Icones sociais inicio --><div align='right'><table border='0' cellpadding='2' cellspacing='0' width='260'><tbody><tr><td width='65'><a href='URL-DO-FEED' title='Assine nosso Feed'><img src='http://dl.dropbox.com/u/49685791/rss.png'/> </a></td><td width='65'><a href='URL-DO-SEU-TWITTER' title='Siga-nos no Twitter'><img src='http://dl.dropbox.com/u/49685791/twitter.png'/></a></td><td width='65'><a href='URL-DO-SEU-FACEBOOK' title='Curta nossa página no Facebook'><img src='http://dl.dropbox.com/u/49685791/facebook.png'/></a></td></tbody></table></div><!-- Icones sociais final -->

Vamos entender as partes destacadas: 
• URL-DO-FEED: Neste local temos que colocar o URL do Feed de seu blog, por exemplo: http://feeds.feedburner.com/UtilizandoBlogger ← Troque a parte "UtilizandoBlogger" pelo nome de seu blog.
• URL-DO-SEU-TWITTER: Neste local temos que colocar o URL do seu Twitter, por exemplo: http://www.twitter.com/ub_oficial ← Troque a parte "ub_oficial" pelo seu username.
• URL-DO-SEU-FACEBOOK: Neste local temos que colocar o URL do perfil de seu Facebook. Você tem que ir até a sua página e copiar o link dele e colocar neste local.

E as partes destacadas em verde? Essa parte está hospedado a imagem correspondente a cada rede social. Se você quiser trocar de imagem, basta hospedar em um local e substituir.
Uma dúvida, o que significa title='Assinar nosso Feed' e outros? Simples, quando esta parte significa que quando ao passarmos o mouse por cima do ícone, irá aparecer este título que você citou.

ENCONTRE ÍCONES PARA O SEU BLOG
Já citei aqui no UB, várias vezes um serviço gratuito onde achamos diversos ícones para o nosso blog. A maioria são de altíssima qualidade. O serviço se chama Icon Finder, procure por "icon social media", você encontrará ícones do Twitter, Facebook, Youtube e entre outros.

Como Colocar Links em uma Imagem?
É simples, basta você modificar este código → <a href=”URL-DE-DESTINO”><img src=”URL-DA-IMAGEM-DESEJADA”/></a> Agora é só modificar as partes que estão em caixa alta, pelos URL's correspondentes a cada.


Espero que tenha ajudado, essa foi uma 'aula' básica de como criar uma lista de ícones de redes sociais para o seu blog. Até a próxima!