Adsense Alinhado dentro do Post

Adsense Alinhado dentro do Post

Há algum tempo estava procurando um tutorial sobre como alinhar um anúncio do Adsense no post à esquerda e o texto da postagem iniciando à direita; da mesma forma como fazemos para incluir uma imagem na postagem e alinhá-la à direita ou à esquerda. Depois de algum tempo, encontrei esse tutorial no Oportunidades na Web e resolvi colocá-lo aqui, apenas com algumas alterações práticas.

Esse post trará um tutorial de como implementar os anúncios relevantes do AdSense em seu Blogspot de forma a buscar aumentar o seu CTR. Ao incluir as caixas de anúncios do AdSense dentro do seu texto, a potencialidade de cliques nos anúncios aumenta. Assim, você obterá um rendimento maior.

Bem, a inserção dos anúncios no interior do texto do seu Blogspot pode se dar de duas formas. Usando tabelas ou usando CSS. Abaixo Segue as duas formas.

Atenção: No meu blog, nenhuma das duas funcionou. Mas eu alterei o local onde colocar a tag com o código do Adsense e deu certo. Pode acontecer de não funcionar em outros blogs como no meu caso. Então, durante o post, você poderá ver a minha versão.

Antes de mais nada, faça um backup do seu modelo para um eventual problema de difícil solução.

• Utilizando Tabelas

O primeiro passo é habilitar a versão expanded widgets na edição do html. Assim todos os elementos escondidos do código vão aparecer.

O segundo passo é localizar a tag:

<p><data:post.body/></p>

que estará localizada abaixo da div class="post-body".

O terceiro passo é inserir esse código

<table align="'left'"><tr><td align="'left'">O SEU CÓDIGO ADSENSE</td></tr></table>

entre as tags <p> e <data:post.body/>.

Se não der certo, colocque abaixo de <div class='post-header-line-1'/> , que funcionou no meu blog.

Assim, você exibirá os anúncios alinhados à esquerda. Se você quiser à direita basta trocar left por right.

• Utilizando CSS

O modo CSS é o que eu mais gostei, e por essa razão é a forma utilizada no E-Opportunities. Antes de mais nada, lembre-se de habilitar a opção expanded widgets.

O primeiro passo é simples, adicione o seguinte código de css antes da tag ]]></b:skin>

.adv
{
float:left;
padding-right:10px;
padding-right:10px;
}

O segundo passo é adicionar uma div de nome adv entre o código <p> e o código <data:post.body/>. E complemente com o seu código do AdSense dentro dela. O código ficará assim:

<p><div class='adv'>O SEU CÓDIGO ADSENSE aki</div><data:post.body/></p>

Se não der certo, colocque abaixo de <div class='post-header-line-1'/> , que funcionou no meu blog.

Se você quiser que o alinhamento seja à direita, basta trocar o comando float para right.

Atenção: Provavelmente ao você adicionar os códigos o AdSense não irá exibir os anúncios. Isso vai se dar por uma questão do problema relacionado ao XML do Blogger. Para solucionar isso você vai ter que alterar o código do AdSense. Calma, essa alteração não vai violar de forma alguma o TOS do AdSense. Essa alteração vai se dar apenas no HTML do Blogspot, porém o Blogger vai exibir o anúncio e o código dele da forma permitida pelo AdSense.

A alteração pode ser feita de duas maneiras (eu prefiro e recomendo a segunda):

• No início e no fim do código do AdSense você verá os seguintes comandos:

<!-- and //--> para que o código funcione basta você substituí-los por: &lt;!-- and //--&gt;

• Para inserir seu código com ele funcionando normalmente,você terá que converte-lo, mas isso é muito fácil, basta acessar o site Escape HTML, colar o código desejado e clicar em parse. Copie o código gerado e cole no local ja mencionado neste tutorial.