Como colocar anúncios do Adsense dentro dos posts do blog - Elaine Gaspareto- Dicas para blogs e inspirações para a vida

Como colocar anúncios do Adsense dentro dos posts do blog

Publicado em 02/07/2018

Como colocar anúncios do Adsense dentro dos posts do blog
Por padrão, no Blogger, os anúncios do Adsense são exibidos na lateral do blog, abaixo das postagens, no rodapé ou no topo do blog. Também podem ser exibidos dentro dos posts do blog e isso é bem legal mas tem o inconveniente de precisar inserir manualmente o código do anúncio post a post. E isso, em um blog com centenas de posts como o meu se tornaria inviável.

O ideal seria um código único, que fosse inserido no código fonte e fizesse aparecer o anúncio automaticamente dentro do post.
Acontece que todos os modos de fazer isso que eu testei apresentavam problemas.
O mais perto que cheguei de um bom resultado comia as primeiras palavras abaixo do anúncio e isso não pode, né?

De tanto mexer cheguei nesse código, que compartilho contigo hoje.
O resultado será um anúncio do Google Adsense abaixo de seu segundo parágrafo, automático em todos os posts.
Ainda não é perfeito, mas já é um avanço!
Vamos aprender?


Como colocar anúncios do Adsense dentro dos posts do blog- método automático 


Para começar, claro, você precisa ter o Adsense aprovado e ativo em seu blog.
Na Série Como criar um blog eu falei brevemente sobre como se inscrever no programa de monetização Adsense.
Leia, caso ainda não seja inscrito no programa:



Adsense  aprovado e ativo no blog?
Então vamos adiante!

Você precisa criar o bloco de anúncios que vai usar.
No painel administrativo de seu blog clique na aba Ganhos e depois clique em Acesse o AdSense para detalhes sobre meus ganhos.
Na página que abrir clique em Meus anúncios.
A seguir clique em Bloco de anúncios e aí clique no botão Novo bloco de anúncios.
Selecione a opção Anúncios In-article.
Assim:

Anúncios In-article

Na página que abrir configure seu bloco de anúncios, nomeie-o e depois de pronto clique em Salvar a obter o código. Copie o código e a seguir acesse essa página:


Conversor de códigos


Cole seu código no primeiro campo, clique em Converter e copie o código convertido. Salve em um bloco de notas ou deixe a página aberta e volte para copiar na hora que precisar.
Isso tem que ser feito senão seu template não aceitará o código, ok?

Agora vamos de fato inserir o código em seu blog.
Acesse a aba Tema e clique em Editar HTML.
Dentro da caixa do código-fonte tecle Ctrl+F e na barra de busca que expandir digite  <data:post.body/> e tecle Enter para localizar.

Dependendo do modelo de seu blog poderão aparecer várias ocorrências desse trecho, e aí não tem jeito, tem que testar.
Em geral o que buscamos é a segunda ocorrência do trecho, ou a última.
Achou o trecho que precisamos?
Substitua-o por este código:


Copiar o código


No lugar onde marquei CÓDIGO DO ANÚNCIO cole, claro, o código do seu anúncio (já convertido, não esqueça!), a seguir salve e visualize um post do blog.
Sim, não adianta visualizar a página inicial pois o código está configurado para exibir os anúncios somente nas páginas internas do post.
Isso importa porque senão ficaria um monte de anúncios na home do blog e não podemos fazer isso.

Visualizou? Tudo ok?
Muito provavelmente vai aparecer um espaço em branco onde ficará o anúncio, é normal. Demora um pouco pra aparecer certinho, mas se o espaço em branco apareceu significa que deu certo.
O anúncio In-article aparecerá automaticamente em todos os posts de seu blog.


Dicas e informações importantes


Como colocar anúncios do Adsense dentro dos posts do blog

1- Como eu disse acima o código está configurado para mostrar os anúncios somente nas páginas internas dos posts.
Mas se realmente você quer exibir na página inicial basta apagar a linha
<b:if cond='data:blog.pageType == &quot;item&quot;'> que aparece no começo do código e sua condicional de fechamento </b:if> que aparece depois do código do Adsense convertido.

2- Para localizar o trecho exato que precisamos (<data:post.body/>) e substituir uma dica boa é achar essa linha:

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>

O trecho que queremos estará abaixo dela, assim:

Aí é só substituir pelo código fornecido por mim, colocar seu código de anúncio convertido e salvar.

3- Para que o anúncio apareça é preciso que seu post tenha texto, claro.
Se tiver só imagens, pouco texto ou só vídeo o anúncio vai aparecer acima do título da postagem.

4- Nos modelos responsivos nativos do Blogger tipo Soho, Emporio, etc... só há uma ocorrência de <data:post.body/>.
Portanto é ela que deve ser substituída pelo código que forneci.

5- Caso futuramente você queira retirar esse recurso basta localizar todo o código inserido e substituí-lo pela tag original <data:post.body/>.

6- Além de anúncios do Adsense esse código pode ser usado para inserir quaisquer outros anúncios, banner de parceiros, banner de afiliados, etc...


E terminamos!
Caso você tenha alguma dificuldade deixe sua dúvida nos comentários e eu respondo assim que possível.





23 comentários

  1. Ela, você é incrível, parabéns por sempre explicar tão bem e por nos ajudar, muitíssimo obrigada!
    Estava precisando muito deste post!
    Deu certinho no meu blog, amei!

    Beijokas
    Vivi

    ResponderExcluir
  2. O seu foi o unico a funcionar direitinho. Obrigado e parabens pelo blog

    ResponderExcluir
  3. Oi, tudo bem? Eu coloquei o anuncio sem converter e está funcionando bem, tanto em computadores como em celulares.
    Para que serve a conversão? faz mal usar do jeito que estou usando?


    Obs: Na sua postagens diz que o template não aceitara o código se não for convertido, o meu template não é os padrões do blogger, eu baixei um de um site (não sei se interfere, apenas quis dar essa informação).

    ResponderExcluir
    Respostas
    1. Diego, em geral os templates do Blogger não aceitam códigos em html, só em formato xml.
      Por isso recomendo parsear o código.
      Mas se seu template aceitou e os anúncios estão normais creio que não tem problema não...

      Excluir
  4. Fiz o tutorial e deu certo! Valeu!!!
    Para quem quiser ver como ficou é só acessar: https://www.linkrecente.com/

    ResponderExcluir
  5. Nossa! Muito obrigado! Ajudou Bastante!

    ResponderExcluir
  6. Elaine, só mais uma coisinha rsrs...
    Eu uso esse seu código desde que consegui meus anúncios, mas eu observo que ele funciona bem para postagens novas, não sei porque as mais antigas não aparecem, só depois de umas três ou quatro vezes que carrego a página é que eles aparecem nas postagem antigas. No meu blog é assim que tenho observado. Eu vi em outro blog de dicas que você pode inserir no meio da postagem o cód na aba html do editor de texto que o anuncio vai rodar ali onde inseriu o cód, eu fiz, aparece as vezes. já ouviu falar disso?
    E aqui no blog, nas suas postagens, os anúncios aparecem várias vezes no decorrer do texto, cumékifaiz?
    Bjos minha flor!

    ResponderExcluir
    Respostas
    1. Jack, eu uso um formato de anúncio que é automático, aí o próprio Adsense define onde e quando inserir os anúncios.
      em geral quanto mais texto mais anúncios serão veiculados.
      E caso o anúncio não apareça é porque não há oferta de anunciantes para o blog em questão, ou para o espaço em questão...

      Excluir
    2. Hummm entendi.
      Ok, muito obrigada. Super beijo!

      Excluir
  7. Oi!
    Existe alguma maneira de colocar algo no meio de todos os posts automaticamente sem ter que substituir a linha ? Eu queria colocar um botão "curtir", da fanpage, no meio todos os posts automaticamente e esse código até funciona, mas aí o adsense e outros botões que dependem desta linha param de funcionar. Se puder me ajudar com isso eu agradeço muito!
    Obs.: Eu sei que dá para fazer manual, mas daria muito trabalho, pois tenho muitos posts.

    ResponderExcluir
    Respostas
    1. Olha, a única solução é não usar essa forma de inserir anúncios entre os posts e optar pelos anúncios automáticos, que já adicionarão anúncios entre os posts se for configurado assim, no seu painel do Adsense.
      Infelizmente não conheço jeito de adicionar ambos os recursos, botão curtir e o anúncio como explicado nesse tutorial...

      Excluir
  8. Show Elaine, foquei sua fã, deu tudo certinho, mas foi no segundo código ( TODAS AS DICAS... Você colocou as fotos do artigo com os títulos e aquele botão para clicar. Não consigo fazer, você tem um tutorial?

    ResponderExcluir
  9. Deu tudo certo pra mim. Obrigada Elaine, virei sua fã.
    Queria fazer aquele submenu que você fez na pagina DICAS PARA BLOGS > TODAS AS DICAS... Você coloca a foto e o titulo de varias postagem dentro da pagina com um botão para clicar. Preciso aprender a fazer, você tem uma aula disso? Obrigada

    ResponderExcluir
  10. Oi, amei seu artigo, deu certinho aqui pra mim, eu tinha 2 códigos e deu certo no ultimo. Obrigada.
    Queria aprender a fazer aquele submenu que você tem...EM DICAS PARA BLOG...TODAS AS DICAS... você colocou ali foto e o titilo, um abaixo do outro com um botão clicável para ir para a pagina. Me ensina????? você tem um tutorial? Meu Watss: 49 9993 4114. bjs

    ResponderExcluir
  11. Olá boa noite. Será que alguém me ajuda, encontrei o trecho s não sei de onde até onde tenho que selecionar.

    ResponderExcluir
    Respostas
    1. Cíntia, é só o trecho que marquei com a flechinha vermelha na imagem. Só ele, nada mais :)

      Excluir
  12. Muito bom Elaine. Era exatamente o que eu queria. Deu certo aqui. Obrigado.

    ResponderExcluir
  13. Comigo também não deu certo.Para mim apareceu 4 códigos, testei no primeiro duas formas diferentes, incluindo essa. E no ultimo tentei e não deu certo

    ResponderExcluir
    Respostas
    1. Caso seu tema seja baixado da internet pode mesmo não funcionar pois em geral são códigos diferentes.
      Se for um tema nativo do Blogger, funciona, é o que eu uso aqui.

      Excluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Deixe sua pergunta ou solicitação sempre nos comentários, eu infelizmente não tenho como responder pedidos de ajuda por email.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…