Criando menu com ícones de redes sociais para Blog

O uso de redes sociais é fundamental para um blogueiro, este assunto é indiscutível. Porém, quando se cria uma conta em redes sociais, você não será seguido, pois ninguém o conhecerá nesta rede. O melhor meio de adquirir relações em redes sociais e também divulgá-la para seus visitantes é usando um menu de ícones, como este da imagem acima. Não é difícil criar o seu menu de ícones, e não leva muito tempo para criá-lo.

Eu já utilizei um simples menu de ícones aqui no Blog, mas atualmente, eu utilizo um simples widget do Dicas Blogger, que indica o número de seguidores do Twitter e assinantes do Feed de meu Blog. Também adicionei a barra de navegação o link de algumas redes sociais em que me encontro, como Twitter e Facebook. A criação de um menu de ícones é fácil, porém, requer um conhecimento mínimo de HTML, para ter um entendimento melhor nos códigos que usaremos para sua criação. Não usaremos tags complicadas, apenas as tags essenciais, para centralizar o código e gerar a imagem dos ícones e também para ajustar o seu tamanho. Não são códigos difíceis de se compreender, basta estar atento para que nenhum erro possa modificar a aparência de seu menu. Antes de tudo, é preciso escolher as redes sociais que usará. Dependendo do número de redes sociais, os ícones deverão ser menores, para caberem em um espaço na barra lateral. Recomendo o uso apenas de redes sociais essenciais. Também é preciso encontrar os ícones das redes sociais que você usará. Recomendo que encontre-os na IconsPedia, um site que fornece uma imensidão de ícones.
   -> IconsPedia - Uma imensidão de ícones

Você também pode baixar o pack com ícones de redes sociais essenciais que criei anteriormente.
   -> Pack com ícones de Redes Sociais

Baixe o número de ícones que necessitar para a criação de seu menu. Deixe-os armazenados em seu disco rígido. Agora, você deve hospedá-los em um servidor de imagens. Um ótimo servidor que utilizo sempre que preciso hospedar minhas imagens é o ImageShack, que permite hospedá-las sem cadastro.
   -> ImageShack - Servidor de Imagens Online

Hospede todos os ícones que precisará na criação de seu menu, e guarde o link deles. Depois que hospedar todos, acesse o painel do Blogger e vá em Layout -> Elementos da Página -> Adicionar um Gadget -> HTML/JavaScript. Agora, vamos criar o código do menu, para poder colocá-lo em seu Blog. Para obter uma imagem, você deve usar o seguinte código:

<img src="URL_IMAGEM" width="LARGURA" height="ALTURA"/>

Este código que usamos para obter uma imagem. Usaremos este código para cada um de nossos ícones, substituindo URL_IMAGEM pelo link do ícone hospedado, LARGURA pela largura que terá o seu ícone e ALTURA pela altura de seu ícone. Lembre-se que a altura e largura deverão ser a mesma em todos os ícones, e que o ícone deve ser quadrado, sendo que a largura e altura sejam a mesma. Também devemos centralizar os ícones, para isso, usaremos o código seguinte, que ficará da seguinte maneira com os ícones:

<div style="text-align:center">
CÓDIGO_ÍCONE
</div>

Note que, a DIV irá centralizar os ícones. Entre a abertura e encerramento da tag, coloque o código de todos os ícones que irá usar. Eles ficarão em uma mesma linha e todos centralizados. Lembre-se de ajustar o tamanho dos ícones de acordo com a sua barra lateral, para que eles não ultrapassem o limite de sua largura e vão para fora de seu Blog. Use este código e coloque o código dos ícones entre a DIV. Salve o seu widget e veja que o seu Blog já possui um simples menu de redes sociais. Caso não tenha compreendido muito bem este tutorial pela falta de conhecimento de códigos, recomendo uma aula de HTML para iniciantes que publiquei anteriormente.

   -> HTML - Aula 1