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