Páginas

Como adicionar Icones Para Redes Sociais no seu blog

Um menu suspenso para sua Rede-Social além muito charmoso e elegante é muito útil para divulgação do seu blog.

Escolha os ícones, salve em seu computador e hospede em um site tipo Phobucket, Picasa ou Tinypic.

Sites e Blogs | Icones Para Redes Sociais

Adquira agora o seu acesso Premium MegaUpload, RapidShare & HotFile.
Planos: 30 Dias | 60 Dias | 90 Dias | 180 Dias | 365 Dias

 

Adicione uma opção de Gadget de HTML/JavaScript para adicionar funcionalidade de terceiros ou outro código a seu blog.

Copie o código abaixo e cole na Gadget que acabou de adicionar.
<a href="link do Site" style="position: fixed; left: 2px; top: 50px;" target="_blank"><img border="0" heigth="48" src="Link da Imagem Hospedada" title="Assinar Feed" width="48" /></a>

href="link do Site" = Aqui você coloca o link do site, Ex: Se for feed ficara assim: href="http://feeds.feedburner.com/ArtesEmPsd
Importante lembrar que o link tem que ficar dentro das aspas.

Fixed = Opção para que os icones fiquem fixo, ou seja ele se movem junto com a barra de rolagem, caso  não queiram que se isso aconteça, é so apagar essa opção.

left = Esquerda. Caso queiram que os icones fiquem do lado direito é so trocar o left por right

2px = essa opção é a distância entres os icones. No meu caso escolhi 2px.

top: 50px = essa é a distância dos icones até o topo do blog. É aconselhavel começar com 50px como coloquei, se adicionar mais icones é importante da uma diferença de 50px a mais, ex:


<a href="link do Site" style="position: fixed; left: 2px; top: 50px;" target="_blank"><img border="0" heigth="48" src="Link da Imagem Hospedada" title="Assinar Feed" width="48" /></a>

<a href="link do Site" style="position: fixed; left: 2px; top: 100px;" target="_blank"><img border="0" heigth="48" src="Link da Imagem Hospedada" title="Assinar Feed" width="48" /></a>
 caso contrar os icones poderão não aparescer.

target="_blank" = Quando clicar no icone, abrir em uma nova janela. Se for utilizado target="_top" o link será forçado a abrir na mesma janela.

img border="0" = Distância da imagem a lateral da página.

heigth="48" e width="48" = Altura e largura dos icones

src="Link da Imagem Hospedada" = Link da imagem onde o icone está hospedado. é só clicar com o botão esquerdo do mouse logo em seguida propriedades, depois é so copiar o link que será exibido.

title="Assinar Feed" =  Nessa opção você coloca o titulo do icone, pois quando vocês passarem o mouse por cima do icone, aparecera a descrição do titulo que escolheram

Caso queiram  mais de um icone é so adicionar varios do código que disponibilizei acima, ex:

<a href="link do Site" style="position: fixed; left: 2px; top: 50px;" target="_blank"><img border="0" heigth="48" src="Link da Imagem Hospedada" title="google buzz" width="48" /></a>

<a href="link do Site" style="position: fixed; left: 2px; top: 50px;" target="_blank"><img border="0" heigth="48" src="Link da Imagem Hospedada" title="Assinar Feed" width="48" /></a>

<a href="link do Site" style="position: fixed; left: 2px; top: 100px;" target="_blank"><img border="0" heigth="48" src="Link da Imagem Hospedada" title="Comunidade do Orkut" width="48" /></a>

<a href="link do Site" style="position: fixed; left: 2px; top: 150px;" target="_blank"><img border="0" heigth="48" src="Link da Imagem Hospedada" title="FaceBook" width="48" /></a>

<a href="link do Site" style="position: fixed; left: 2px; top: 200px;" target="_blank"><img border="0" heigth="48" src="Link da Imagem Hospedada" title="Msn" width="48" /></a>

O resultado é como aparece no meu blog:

Nenhum comentário:

Postar um comentário