Gadget Ícones Flutuantes Para Redes Sociais no Blogger - BlogSpot 3

Ólá pessoal,  como mostra a imagem  vamos aprender hoje a adicionar um gadget de Icones flutuantes,  aqueles que ficam bem no canto de blogs que te segue para cima e para baixo. Vamo lá?

Com este gadget você pode incluir botões para as redes sociais que você participa, desta forma estará divulgando aos seus leitores e convidando-os a acompanhar você ou o conteúdo do seu blog nas redes sociais.

Os ícones aparecem fixos no blog, no canto esquerdo.

Para instalar este gadget, vá para a aba "Design", clique em "adicionar um gadget" (pode ser em qualquer lugar), escolha o modo "HTML/javascript" e cole o seguinte código abaixo:

a href="LINK-FEED" style="position: fixed; left: 2px; top: 100px;" target="_blank">
<img border="0" heigth="48" src="ICONE-FEED" title="Assinar Feed" width="48" /></a>
<a href="LINK-TWITTER" style="position: fixed; left: 2px; top: 150px;" target="_blank">
<img border="0" heigth="48" src="ICONE-TWITTER" title="Siga-nos" width="48" /></a>
<a href="LINK-FACEBOOK" style="position: fixed; left: 2px; top: 200px;" target="_blank">
<img border="0" heigth="48" src="ICONE-FACEBOOK" title="Facebook" width="48" /></a>
<a href="LINK-GOOGLE-BUZZ" style="position: fixed; left: 2px; top: 250px;" target="_blank">
<img border="0" heigth="48" src="ICONE-GOOGLE-BUZZ" title="Google Buzz" width="48" /></a>
<a href="LINK-YOUTUBE" style="position: fixed; left: 2px; top: 300px;" target="_blank">
<img border="0" heigth="48" src="ICONE-YOUTUBE" title="Youtube" width="48" /></a>
<a href="LINK-MYSPACE" style="position: fixed; left: 2px; top: 350px;" target="_blank">
<img border="0" heigth="48" src="ICONE-MYSPACE" title="MySpace" width="48" /></a>
<a href="LINK-ORKUT" style="position: fixed; left: 2px; top: 400px;" target="_blank">
<img border="0" heigth="48" src="ICONE-ORKUT" title="Orkut" width="48" /></a>

Acrescente no código, os links e as urls dos ícones das redes sociais, nos locais indicados. Você pode fazer as suas adaptações, localize um site onde se encontram icones no google e copie e hospede em seu site preferido, pode ser no blogger mesmo. No caso das imagens sairem do ar, você já tem a sua garantida. ;)

Se for utilizar outros ícones, utilize imagens com tamanho de 48x48.

Se você quiser retirar alguma rede social que consta no código, basta apagar o código correspondente a ela. E se quiser acrescentar mais alguma, copie o código abaixo:

<a href="LINK-AQUI" style="position: fixed; left: 2px; top: 450px;" target="_blank">
<img border="0" heigth="48" src="URL-DO-ICONE" title="NOME-DA-REDE-SOCIAL" width="48" /></a>

E acrescente-o no código logo após o código do último ícone, fazendo as edições necessárias do ícone, título, link para rede social que você está acrescentando, É muito importante que você ajuste o valor em:

top:450px; --> Distância da imagem para o topo.

Acrescente +50px a cada ícone que você for incluir.

Por exemplo:

Se for incluir mais 2 ícones:

o 1º -> "top:500px"

o 2º -> "top:550px"

Até a proxima.

Fontes: Mundo blogger