qd se aumenta o tamanho da letra…

Sugiro:

#colLeft {width:163px; float:left; margin:0; clear:left;padding:0 0 0 5px}

O botão de pesquisa sai à mesma do sítio mas pelo que estive a ver acho que só com mudanças no html é fica direito.

Há sites em que vários blocos de anúncios funcionam e outros em que não funcionam. E ao contrário do que muitos dizem só uma coisa interessa – os ganhos ao fim do mês. Não se preocupem com EPCs, CTRs bla bla nada isso interessa, só interessam mesmo os ganhos. Para saber há que testar, mas como em qualquer teste há variáveis que podem detorpar os resultados completamente. No caso do Adsense há algo que muita gente não sabe e outros sabendo esquecem-se desse pormenor importantíssimo – A posição dos anúncios no código fonte da página!

“E porquê?” – perguntam vocês. Porque os anúncios são servidos por ordem de valor e essa ordem é a ordem com que os anúncios são requisitados e não a ordem com aparecem na face visível da página.

Ok vamos pedir emprestado o heat map do Adsense e meter-lhe 3 blocos de anúncios que vou numerar de 1 a 3.

Criei então esta página cuja estrutura é:

<div id=”contentor”>
<div id=”bloco1″><h1>1</h1></div>
<div id=”bloco2″><h1>2</h1></div>
<div id=”conteudo”>texto</div>
<div id=”bloco3″><h1>3</h1></div>
</div>

e o CSS:

#contentor{width: 900px;margin: 10px auto}
#bloco1{width: 100%; height: 100px; background: blue;border: 1px solid #000;}
#bloco2{float:left;width: 160px; height: 400px; margin: 10px 0; background: red;border: 1px solid #000;}
#conteudo{float:right;width: 720px;margin: 10px 0 10px 10px;}
#bloco3{float: right;width:720px;height: 100px; background: green;border: 1px solid #000;}

Como podem na estrutura da página, vamos ter os melhores anúncios no bloco 1, depois no bloco 2 e só depois no bloco 3. A ordem ideal segundo o heat map seria bloco2, bloco3, bloco1 e já agora puxamos o conteúdo para o início do código fonte.

<div id=”contentor”>
<div id=”conteudo”>texto</div>
<div id=”bloco2″><h1>2</h1></div>
<div id=”bloco3″><h1>3</h1></div>
<div id=”bloco1″><h1>1</h1></div>
</div>

Obviamente que se não fizermos mais nada e apenas mudarmos a ordem dos divs vai ficar tudo fora do sítio. Então como manter o layout da página e ao mesmo tempo alterar a ordem dos anúncios no código fonte?

Muito fácil basta usar o absolute positioning e algumas margens.

Ora os blocos que estão fora do sítio são o bloco 2 e o conteúdo. Logo vamos alterar o CSS para:

#bloco1{position: absolute; top:0;width: 900px; height: 100px; background: blue;border: 1px solid #000;}
#bloco2{position: absolute; top: 110px;width: 160px; height: 400px;margin: 0 0 10px 0;background: red;border: 1px solid #000;}
#conteudo{width: 720px;margin: 110px 0 10px 170px;}
#bloco3{float: right;width:720px;height: 100px; background: green;border: 1px solid #000;}

et voilá conteúdo bem lá em cima, e anúncios pela ordem correcta segundo o heat map!