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

João Santos | 13:14 | ,


Ó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.


Gostou do artigo? Assine via e-mail e receba atualizações do blog imediatas em sua caixa de entrada ou se preferir assine via RSS/Feed. Vira fã no Facebook.

3 Responses So Far:

Diego disse...

muito massa seu blog, adorei ele, t+, fui..

Louie disse...

Blog excelente brother!

João Santos disse...

Obrigado pelo comentário, e no que eu puder ajudar. Conte comigo.

- Comentário Moderados -

Não aceitamos por aqui:

- comentário nada a ver com o artigo.

- Links de propaganda (Spam).

- Link de divulgação de seu Blog/Site.

- Pedido de parcerias.

- Com palavrões e onfensas.

Enfim, é simples coisas desnecessárias serão removida, qualquer dúvida temos uma página de Contato.
Agradeço pela compreensão.

 
DiretorioUP Copyright © 2010 is Designed by Lasantha Page Rank Technology Blogs - Blog Rankings Technology (Electronics) - TOP.ORG Home | RSS Feed | Comment RSS