Insira ícones flutuantes para redes sociais na lateral do site

Hoje é indispensável que um site tenha interação com redes sociais; mesmo que seja com links de redirecionamento.

Diante disto estarei passando um código simples de se aplicar no site WebAcappella.


Código:

<a href="URLREDESOCIAL" style="position: fixed; left: DISTANCIALATERALpx; top: DISTANCIATOPpx;" target="_blank">
<img border="0" heigth="ALTURAICONE" src="URLICONE" title="TITULO" width="LARGURAICONE" /></a>



Entendendo o código:

Os techos em vermelho devem ser personalizados da seguinte forma:


URLREDESOCIAL: Inclua a URL da rede sozial desejada,
DISTANCIALATERAL: A distancia em pixel que o ícone irá aparecer a partir do lado equerdo
DISTANCIATOP: A distância em pixel que o ícone irá aparecer a partir do topo
ALTURAICONE: A altura em pixels do ícone referente a rede social
URLICONE: A url referente onde o ícone está hospedado
LARGURAICONE: A largura em pixels do ícone referente a rede social
TITULO: Coloque uma descrição para o redirecionamento


Para se usar mais de uma rede social repita o código modificando apenas as informações referente a rede social desejada e as informações do posicionamento.


Passo a passo:

Irei Fazer um passo a passo suponde que usarei as redes sociais: Facebook, Google+, Youtube

1) Cração dos ícones.

Crie ícones através de um programa de sua preferência ou utilize ícones baixados da internet.  O importante que todos tenham a mesmas dimensões.

Então utilizei no exemplos ícones que já tinha nas dimensões 50 x 50 pixels

  

 Criei na minha hospedagem, dentro de public_html a pasta "img" e fiz upload dos ícones para dentro desta pasta

Na verdade hospedei para o seguinte endereço na internet.

http://www.webacappellashow.com.br/desktop/img


Então cada imagem  possui sua respectiva url sendo:



http://www.webacappellashow.com.br/desktop/img/facebook.png



http://www.webacappellashow.com.br/desktop/img/googleplus.png



http://www.webacappellashow.com.br/desktop/img/youtube.png


Então ja tenho a url dos ícones.


2) Personalizando o código

Bom, no exemplo vou querer que os ícones apareçam na ordem

1º FacebooK
2º Google
3º Youtube


E vou querer que comecem numa distância de 200 px do topo.

Como eu sei que as dimensões dos ícones são 50 x 50 pixels ALTURAICONE = 50 e LARGURAICONE = 50



No primeiro código referente o Facebook, irei substituir DISTANCIATOP por 200.

E como eu desejo que a distância da lateral seja 5 pixels substituo em todos os códigos DISTANCIALATERAL por 5

Para não ficar um amonturado de ícones vou querer que a distância entre eles sejam também de 5 pixels. Sendo que a altura de cada pixel que estou usando é 50px e o primeiro começa em 200. Os códigos referente ao Google e Youtube deverei fazer a seguinte soma:

Para iniciar com Facebook DISTANCIATOP = 200
Para o Google DISTANCIATOP será 200 + 5 (distancia entre eles) + 50 (tamanho do icone) = 255
Para o Youtube DISTANCIATOP será  255 + 5 (distancia entre eles) + 50 (tamanho do icone) = 310

Agora basta trocar URLREDESOCIAL pela url de cada rede social que desejo o redirecionamento


Para o código do facebook:
<a href="https://www.facebook.com/webacappellashow" style="position: fixed; left: 5px; top: 200px;" target="_blank">
<img border="0" heigth="50" src="http://www.webacappellashow.com.br/desktop/img/facebook.png" title="Facebook" width="50" /></a>

Para o código do Google:
<a href="https://plus.google.com/communities/107295316812252444739" style="position: fixed; left: 5px; top: 255px;" target="_blank">
<img border="0" heigth="50" src="http://www.webacappellashow.com.br/desktop/img/googleplus.png" title="Google" width="50" /></a>

Para o código do Youtube
<a href="https://www.youtube.com/watch?v=y4_2k8991qE" style="position: fixed; left: 5px; top: 310px;" target="_blank">
<img border="0" heigth="50" src="http://www.webacappellashow.com.br/desktop/img/youtube.png" title="Youtube" width="50" /></a>




Então o código pronto para ser incluído no Webacappella conforme o exemplo ficou da seguinte maneira:

<a href="https://www.facebook.com/webacappellashow" style="position: fixed; left: 5px; top: 200px;" target="_blank">
<img border="0" heigth="50" src="http://www.webacappellashow.com.br/desktop/img/facebook.png" title="Facebook" width="50" /></a>
<a href="https://plus.google.com/communities/107295316812252444739" style="position: fixed; left: 5px; top: 255px;" target="_blank">
<img border="0" heigth="50" src="http://www.webacappellashow.com.br/desktop/img/googleplus.png" title="Google" width="50" /></a>
<a href="https://www.youtube.com/watch?v=y4_2k8991qE" style="position: fixed; left: 5px; top: 310px;" target="_blank">
<img border="0" heigth="50" src="http://www.webacappellashow.com.br/desktop/img/youtube.png" title="Youtube" width="50" /></a>



Agora no Webacappella você pode adicionar para cada página individualmente ou inserir na matriz do seu projeto.

Basta usar a opção INSERIR >> CÓDIGO HTML  e colar o código alterado no campo

Independente de onde o código estiver posicionado na página o resultado não alterará