quarta-feira, 25 de maio de 2011

Gadget ícones flutuantes para redes sociais

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.
Eu já publiquei um tutorial ensinando a instalar um Icone de Feed Flutuante no blog, e agora veremos como instalar vários outros ícones flutuantes para as 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:


<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.
Os ícones que eu utilizei na imagem demonstrativa fazem parte do pacote de ícones - BlackColors criados por mim.
Se você quiser utiliza-los, recomendo que faça download, e hospede-os no seu site preferido (recomendo o Picasa Web ), para evitar eventuais problemas de hospedagem e os ícones saírem do ar.
Após hospedados os ícones, basta incluir os endereços das imagens referentes a cada ícone.
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"
Se você não ajustar esses valores os ícones ficarão desconfigurados e depois não adianta voltar aqui reclamar que não deu certo, ok? ;)

0 comentários:

Postar um comentário