26/04/2017

Como Colocar o Código do AdSense Direto no HTML do Blogger

Além do Gadget do AdSense no Blogger você pode colocar o código do AdSense direto no HTML do Blogger. Isso é uma forma de colocar os anúncios em lugares como no inicio ou final da postagem ou ainda ativar as Page-level ads no Blogger.

Colocar o Código do AdSense no HTML do Blogger


Normalmente AdSense gera um código de anúncio assíncrono (resumidamente: o carregamento do anuncio não atrapalha o carregamento do resto da pagina). Além disso, o AdSense usa aspas em vez do sinal ' no seu código. Estes são dois motivos que geram erro na hora de colocar o código do AdSense diretamente no HTML do Blogger.

Como inserir o código do AdSense no HTML sem Erro

Primeiro faça login no AdSense, entre em Meus Anúncios > Page-level ads. Então quando estiver na pagina Page-level ads você pode ativar vários formatos de anúncios:

Anúncios QuickStart: Os anúncios QuickStart são incorporados automaticamente à sua página. (para o Blogger não é necessário ativar esta opção, mas se ativar essa opção poderá aparecer mais blocos de anúncios no seu blog, portanto verifique para não passar do limite de 3 anúncios).

Anchor/Overlay ads: Anúncios para dispositivos móveis que ficam fixos na borda da tela do usuário.

Vignette ads: Anúncios em tela cheia para dispositivos móveis que aparecem entre o carregamento de páginas no seu site e que podem ser ignorados pelos usuários com facilidade.

Leia sobre: Anúncios AdSense Fixo na Pagina ou Tela Cheia no Celular

Agora logo abaixo temos o código do AdSense, clique no botão ver código e copie o HTML do anuncio do Google AdSense.

código anuncios google adsense

Cole no bloco de notas e veja que o inicio do código é deste jeito:

<script async src="//pagead2..........

Troque o trecho async src por async='async' src= , deixando o código assim:

<script async="async" src="//pagead2...........

Agora troque todos os sinais de aspas ", por '. Mas atenção tem que ser todos os sinais de aspas senão vai dar uma mensagem de erro na hora de salvar o HTML do Blogger.

Depois disso entre na pagina editar HTML (Pagina Tema > clique no botão editar HTML), procure por <head> e cole o código que modificamos logo abaixo dele.

head no html do blogger

Salve a mudança no html. Isto ainda não faz aparecer os blocos de anúncios do AdSense no seu blog, ele apenas mostrará os anúncios Vignette ads e Anchor/Overlay ads.

Código do Bloco de Anúncios AdSense no HTML do Blogger


Naquela mesma pagina do AdSense, meus anúncios, você já entra direito nos blocos de anúncios que já criou ou pode criar um novo bloco de anúncios AdSense (Veja aqui: Criar Blocos de Anúncios do Adsense).

Quando pegar o código do bloco de anúncios do AdSense também precisa fazer algumas modificações antes de colocar no HTML do Blogger.

Código Original do Bloco de Anúncios AdSense

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- teste anuncio -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-XXXXXXXXXXXXX"
data-ad-slot="XXXXXXXX"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Apague a primeira linha <script ..... </script>, pois já colocamos isso no outro trecho do código, portanto é inútil repetir (isso é opcional, se deixar não faz diferença, mas tem que alterar o async como mostramos no começo do tutorial).

troque todos os sinais de " por '. Então o código modificado ficará assim:

<!-- teste anuncio -->
<ins class='adsbygoogle'
style='display:block'
data-ad-client='ca-pub-XXXXXXXXXXXXX'
data-ad-slot='XXXXXXXX'
data-ad-format='auto'></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Onde colocar o código de anúncio no seu HTML


Novamente na pagina tema > editar html, procure por data:post.body e cole o código que alteramos logo abaixo dele. Claro esta é apenas uma sugestão e você pode escolher outros lugares do html para colocar o código do AdSense.


Também é possível colocar anúncios AdSense no Blogger diretamente num Gadget de Html/javacript ou no próprio gadget do AdSense.

Este tutorial ficou meio longo, mas na pratica é bem mais fácil de fazer do que parece. Abraços e boa sorte com seu site.
Related Posts with Thumbnails

7 comentários:

  1. Poderiam ensinar a colocar o anuncio no meio da publicação ou lado como muitos sites usam atualmente.

    ResponderExcluir
  2. se você colocar o código do anuncio antes de post.body

    e usar o css float, então o anuncio parecerá no começo da postagem.

    o código fica assim:

    < div style='float: right' > código do adsense < / div >

    mas como falei isso aparece no inicio no meio da postagem acho que não tem como fazer.

    alias teria colocando diretamente em cada postagem, mas não acho recomendável pois se futuramente quiser alterar alguma coisa precisará editar cada um dos posts.

    vou pesquisar e tentar achar algum outro jeito de fazer isso.

    obrigado pela sugestão

    ResponderExcluir
    Respostas
    1. De nada, eu encontrei alguns tutoriais que ensinam a colocar no meio da publicação, mas, dependendo do tamanho texto o anuncio não fica no meio fica em posições diferentes. Queria muito colocar no meio, no WP é tão mais facil!

      Excluir
  3. eu também testei uns que achei mas deram problemas dependendo do template que você usa.

    tomara que o blogger crie essa opção um dia

    ResponderExcluir
  4. Como posso fazer colocar meu blog para ganhar no Adsense e ter os códigos.

    ResponderExcluir
  5. Respostas
    1. tem que se cadastrar no site do adsense:
      https://www.google.com/adsense

      use a mesma conta google que você usa no seu blogger. Depois que fizer o cadastro e o Adsense aprovar seu blog você poderá pegar os códigos e colocar no seu blog para mostrar os anuncios

      Excluir