Inserir anúncios do Adsense dentro dos posts no Blogger

Agora veremos sobre inserção de códigos de anúncios do Adsense. Neste tutorial você vai conferir como inserir o código para exibir os anúncios do Adsense dentro das sua postagens no Blogger.
Bom, você sabe que o próprio Blogger oferece uma opção de inserir blocos de anúncios do Adsense através dos gadget. Se você clicar na aba “gerar receita” abrirá uma lista com opções de configurações automáticas para exibição dos anúncios do Adsense.

Eu particularmente não gostei desta opção, pois ela não dá uma maior liberdade de personalização da maneira que os anúncios serão exibidos no blog. Sem falar no fato que deixa o blog um tanto quanto “pesado” de publicidade.
Eu optei por inserir o código do Adsense diretamente no HTML do template.
Hoje vou ensinar a vocês como eu fiz isso, desta forma você também poderá utilizar o mesmo método, se quiser.
Como vocês já observaram, eu prefiro exibir os anúncios dentro do post, e somente nas página individuais. Isso deixa o meu layout mais “limpo” (pelo menos eu penso assim).

Bom, o primeiro passo a ser seguido é: Gerar o código.
Antes de mais nada, cabe salientar que para você poder prosseguir com esse tutorial é necessário que você já tenha sua conta Adsense aprovada e já tenha escolhido e configurado os anúncios que pretende exibir no seu blog, e ter copiado os códigos fornecido pelo Adsense.
Feito isso, agora será necessário parsear (converter) o código que o Adsense gerou, pois se você inserir o código sem converte-lo, dará erro no HTML, pois o Blogger não aceita a linguagem do código diretamente no HTML do template.

Convertendo o código:

Acesse este artigo Ferramenta para converter código adsense e cole o código gerado dentro da caixa, e clique em “Converter“.

Será fornecido o código já parseado(convertido), copie-o e guarde!

Colocar anúncio abaixo do título do post:

Esta opção serve para exibir o anúncio logo abaixo do título, antes do início do conteúdo do post.
No apinel do blogger, acesse o menu “modelo”, clique em “Editar html”, marque a opção “expandir modelos de widgtes” e procure por:

 
<div class='post-body entry-content'> 

E cole o código logo ACIMA deste trecho:

 

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div align='center'>
</div> 
</b:if>

No local destacado em verde, cole o código gerado pelo Adsense que você acabou de parsear no site.
No código acima eu estipulei que o anúncio apareça somente nas páginas internas, ele não aparecerá na Home. Se você quiser que apareça na página inicial também, basta apagar a 1ª e a ultima linha do código, que estão destacados em vermelho.
Na parte destacada em azul, é o código de alinhamento do anúncio. No caso acima eu estipulei que o anúncio fique centralizado, mas se você não quiser alinhar o anúncio, é só apagar o trecho destacado em azul.
Caso queira que ele fique no lado esquerdo, troque “center” por “left”. Lado direito: troque “center” por “right”.

Colocar anúncio abaixo do conteúdo do post:

Se quiser você pode inserir anúncio logo no término do seu artigo, antes do rodapé.
Vá no menu “modelo” >> “Editar html” >> marque a opção “expandir modelos de widgtes” e procure por:

 
<div class='post-footer'> 

E cole o código logo ACIMA deste trecho:

 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div align='center'>
</div> 
</b:if> 

Outras opções:
1) Agora se por acaso, você tem instalado no seu blog o recurso para exibir a Biografia do Autor do post no rodapé (que é meu caso), cole o código completo (juntamente com o código parseado do Adsense) antes do trecho de código para exibir a biografia do autor.

2) Se você utiliza o Hack “Leia Mais” automático, também pode colar o código parseado do Adsense logo no final do trecho do código do post, que neste caso seria logo abaixo de:

 <div style='clear: both;'/> <!-- clear for photos floats --> </div> 

3) Se você utiliza o Leia Mais do próprio Blogger, você pode colar o código parseado do Adsense logo no final do trecho do código do post, que neste caso seria logo abaixo de:

 
<b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + "#more"'><data:post.jumpText/></a> </div> </b:if> 

Como Inserir 3 Blocos de links lado a lado:

Se você notar, no final dos meus posts, a exibição de anúncios são em forma de bloco de links. No meu caso, eu inseri 3 blocos e eles aparecem lado a lado, em forma de uma tabela.
Se você quiser utilizar a exibição dos blocos de links desta mesma forma, vou ensinar para vocês como eu fiz, depois é só você escolher o local que deseja inserir o anúncio em bloco de links.

 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div align='center'> 
(bloco de links 1)
<td>
(bloco de links 2)
</td>
<td> 
(bloco de links 3)
 </td> 
</div>
</b:if> 

Lembrando que, o limite máximo permitido pelo Adsense para exibição de anúncios por blog são 3 anúncios em banners + 3 anúncios em bloco de links. Cuidado para não exceder esse limite!

Ocultar anúncio Adsence das páginas estáticas:

Você pode configurar o código para que os anúncios não apareçam nas páginas estáticas. Para falar a verdade eu não recomendo esta opção, já que a intenção é exibir anúncios para gerar cliques, mas ai é com você. A condicional para ocultar elementos na página estática é essa:

 <b:if cond='data:blog.pageType != "static_page"'> 

O código deverá ficar assim:

 
<b:if cond='data:blog.pageType != "static_page"'>
 
</b:if>

Sobre ocultar ou mostrar anúncios do Adsense em páginas específicas, veja mais sobre as condicionais no artigo: