Inserir anúncios do Adsense dentro dos posts no Blogger

Você já conferiu uma forma de rentabilizar seu blog com o Google Adsense. Já conferiu Como cadastrar e configurar conta no Google Adsense.
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:
Ocultar Elementos em Página Específica

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Comentários
  1. miliane
  2. Ataxerxes
  3. David
  4. Yuri
    • Vanessa
  5. Luciano Mende
    • Vanessa
  6. alessandro
  7. Valter STRT
  8. Digitei
  9. Andre Luiz Grande
  10. leandro
  11. Samuel Azevedo
  12. Rafael Reis
    • Vanessa
      • Rafael Reis
        • Vanessa
  13. leojane de jesus
  14. Bya
  15. .:: Clau ::.
  16. Andreza Nascimento
  17. a
  18. Kongming
  19. Fabio Macedo
  20. .:: Clau ::.
  21. @sjodiel
  22. .:: Clau ::.
  23. Potter
  24. .:: Clau ::.
  25. Ojuara
  26. .:: Clau ::.
  27. @sjodiel
  28. link
  29. Lucas Sa?t0s
  30. .:: Clau ::.
  31. centraldecolchoes.com.br
  32. .:: Clau ::.
  33. centraldecolchoes.com.br
  34. Heartagram Lover
  35. .:: Clau ::.
  36. Beto Default
  37. Bruno Costa
  38. .:: Clau ::.
  39. Anselmo
  40. Fabiano Roberto
  41. Will