Tradutor

quinta-feira, 22 de novembro de 2012

Ícones flutuantes para redes sociais- Como adicionar no blog?

Fixe no seu blog botões flutuantes das redes sociais que você está conectada.
Na imagem abaixo há uma seta vermelha indicando como ficará:

Os ícones será fixado no canto esquerdo, facilitando para que os visitantes do seu blog possa participar das suas redes de contato e assim acompanhar as postagens do seu blog.
Siga as dicas do blog WDI
Para instalar este gadget, clique no menu “Layout“, 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.
Acrescente os endereços das suas URL, ou seja o link das suas redes sociais neste código: a href="LINK-FEED", no lugar do texto vermelho adicione o link do youtube, por exemplo, e na sequência a URL dos ícones explicada logo abaixo.

Os ícones que aparecerão são imagem demonstrativa. Você precisará pesquisar por ícones de cada rede social.

Exemplo: digite no site de busca da sua preferência, assim...
"ícone do youtube" é posicione o cursor do mouse na imagem escolhida e espere até que seja ampliada a mesma, na sequência clique com o botão direito do mouse na imagem e clique na opção "Copiar URL da imagem". E cole entre as aspas duplas que aparece nós códigos fornecido como este src="ICONE-YOUTUBE" no lugar do texto que está em vermelho cole o link da URL da imagem. E faça esse procedimento de pesquisar e copiar e colar URL da imagem para todas as suas redes, como: Facebook, orkut, twitter entre outros.

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:
 1º -> “top:500px
 2º -> “top:550px
Se não for ajustado os valores, os ícones ficarão desconfigurados e não ficará com uma boa aparência.

Nenhum comentário:

Postar um comentário

Olá, bem vindos! Deixe o seu comentário, responderei em seguida!
Atenciosamente: Verônica Veiga

Informática: Seja bem vindo ao blog WDI

Blog WDI Informática
Dicas Windows
Vídeo aulas
Curta o blog no Facebook
_____________________________________
Inscreva-se no meu canal no youtube e acompanhe vídeo aulas e diversos conteúdos que disponibilizo no blog WDI Informática.
Dicas Windows: Vídeos com dicas de windows 7 Dicas manutenção de computadores: Manutenção para PC
Na imagem abaixo você terá acesso a todos os banners criados por mim: