AdSense dentro de um Post no Blogger - Blogspot
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 vou explicar como fazer das duas formas
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/>.
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 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.
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:
<!-- and //-->
P.S.: Uma outra ressalva seria que essa alteração faz com que teociamente o banner do adsense seja exibido em todos os Posts da página inicial. Então você teoricamente teria que reduzir os posts da página inicial para três posts. Porém, ao implementar essa alteração podemos observar que o próprio AdSense otimiza a alocação dos anúncios, e só exibe três blocos, mesmo quando você estabelece mais de 3 posts. Essa inovação foi notada primeiramente pelo amigo Alberto, um dos que me ajudaram a idealizar um tutorial acerca desse tipo de otimização de CTR.
As duas principais fontes desse artigo são: Web-Messenger e Info Tech.
Abraços e espero que tenham gostado.
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 vou explicar como fazer das duas formas
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/>.
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 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.
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:
<!-- and //-->
P.S.: Uma outra ressalva seria que essa alteração faz com que teociamente o banner do adsense seja exibido em todos os Posts da página inicial. Então você teoricamente teria que reduzir os posts da página inicial para três posts. Porém, ao implementar essa alteração podemos observar que o próprio AdSense otimiza a alocação dos anúncios, e só exibe três blocos, mesmo quando você estabelece mais de 3 posts. Essa inovação foi notada primeiramente pelo amigo Alberto, um dos que me ajudaram a idealizar um tutorial acerca desse tipo de otimização de CTR.
As duas principais fontes desse artigo são: Web-Messenger e Info Tech.
Abraços e espero que tenham gostado.
[Update]: O código na parte do CSS, estava equivocado por essa razão alguns usuários não estavam conseguindo configurar a div. Ao invés de id="adv" deve-se colocar class='adv'.
Já corrigi esse pequeno erro (que causa tantos problemas de layout) no tutorial, então se você só viu agora não tem problema porque eu já corrigi o erro no tutorial. Agora, quem pegou a versão antiga do tutorial, por favor corrija.
;)
Já corrigi esse pequeno erro (que causa tantos problemas de layout) no tutorial, então se você só viu agora não tem problema porque eu já corrigi o erro no tutorial. Agora, quem pegou a versão antiga do tutorial, por favor corrija.
;)