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

Posicionamento Absoluto em CSS

O posicionamento Absoluto é diferente do posicionamento Relativo. Ao contrário do pocisionamento Relativo, quando você posiciona um elemento com a propriedade absoluto ele deixa de existir no fluxo do documento. Isso afeta os elementos adjacentes como visto nos layouts baseados em flutuação.



Um elemento é absolutamente pocisionado em relação ao seu ancestral posicionado relativamente. Caso não exista este elemento posicionado relativamente o elemento se posicionará em relação ao seu agente de usuário, ou seja a tela do navegador ou um elemento HTML.

Um problema que as pessoas tem com posicionamentos é lembrar de todos posicionamentos feitos e manutenção deles. Layouts feitos com posicionamentos tedem a ser ótimos para deixar o layout quebrado se o conceito não for bem entendido.

Usando a propriedade z-index você pode controlar a ordem de empilhamentos das caixas. Quanto mais alto o z-index, mais alta a caixa aparece na pilha.
Elementos posicionados absolutamente se sobrepoem a outros elementos na página.

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