Links referências, Afiliados igual ao HOTWords

Falamos em diferenciação de links através de CSS, colocando uma imagem ao lado, para que nossa audiência saiba para onde esta indo.
Que tal agora, fazermos algo mais interessante? HOTWords Personalizado nos links de referências e Afiliados?
Pois é isso mesmo. E melhor, é fácil. E vou usar um exemplo aqui com o blog,
Templates para vocêTemplates Blogger!
Tudo sobre Blogspot
Dicas, truques, etc. que me referenciou está semana. Desde já meu agradecimento.
Primeiro você vai precisar de um código XHTM bem estruturado. Caso não saiba como, leia Estruturando seu código CSS.

<p>
<a href="http://templatesparavoce.blogspot.com" class="dica">Templates para Você;<span>Templates Blogger!<Br/>Tudo sobre Blogspot<Br/>Dicas, truques, etc.</span></a> este é um teste de dica.
</p>

O código XHTML acima, cria um link (âncora) para uma página e dentro foi criada uma classe CSS chamada .dica. Dentro deste link, também foi criado, um span com a frase que aparece no quadro HOTWords Personalizado.

Vamos ao CSS:

a.dica { -- chamamos o link e atribuímos position: relative;
position: relative;
}

Leia sobre Posicionamento Relativo e Absoluto clicando aqui.

a.dica span {
display: none;
}

Neste código escondemos o span onde está a frase da dica. Feito isso vamos configurar a localização que vai aparecer a dica quando o usuário passar o mouse sobre o link.

a.dica:hover span {
display: block;
position: absolute;
width: 150px;
heigth: 100px;
top: -102px;
left: 0;
padding: 20px 8px 0 8px;
background: url(http://ondeestasuaimagem.gif) no-repeat;
color: #000;
font-family: verdana;
font-size: 10px;
}

Configuramos o span como bloco e definimos uma posição absoluta. As medidas 150px e 100px conferi com o tamanho da imagem de fundo que dará a aparência do HOTWords Personalizado. Top: -102px e left: 0 estabelecem a posição. Padding é o espaçamento do topo da imagem para o texto e as laterais. Colocamos a imagem de fundo e definimos como será o texto com cor, fonte e tamanho.

Pronto agora é só colocar a CSS no seu blog e quando for postar colocar o link como está no código XHTML no começo do artigo.

Este código serve para você fazer sua publicidade de programas afiliados como o HOTWord (exemplo clique aqui na palavra, rico) simplesmente criando links de palavras relevantes no seu artigo. Experimente e se gostar me avise ou me linke. Heheh.

Subscreva o CSS-Desvandado completo!
Subscreva CSS - Desvendado por Email