Links referências, Afiliados igual ao HOTWords

23 de agosto de 2008

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

4 comentários:

Marcos Elias disse...

legal cara, vlw a dica!

csspadroes disse...

@Marcos Elias, qualquer dúvida estamos ai!

AF disse...

Ola,

Bom post. Adoro tutos sobre CSS, e se forem em PT melhor. Como já disse antes, ganhas-te mais um leitor assiduo.

Abraço,
Artur

csspadroes disse...

@AF bom saber que tem gente fuçando nos códigos. Eu gosto mais de criar do zero, ai o template fica do jeito que imaginei na minha cabeça
@

Postar um comentário

Faça seu comentário ou sua pergunta. Quando for possível postarei a resposta.
Obrigado!
Para deixar o link da sua última postagem coloque este código:

<em><strong>Seu nome</strong> publicou um post sobre.. <a href="seu link do último post">Título do Post</a></em>

Ficará assim:
Marcelo publicou um post sobre.. Alguma coisa