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 == "item"'>
<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 == "item"'>
<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 == "item"'>
<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
e como e legal
eu coloquei no meu mais não pegou =( nunca pega! –‘ fiz tudo certo mais ainda nada ele demora algum tempo para aparecer?
No meu blog de jogo, não deu certo! Porque?
dicascriminalcase.blogspot.com.br/
Obrigado desde já vanessa!
Boa noite Vanessa. eu quero criar um blog para postagem de anúncios.. tipo que já tenha um banco de dados com 20 tipos de anúncios diferentes e quando eu coloque meu ID seja postado um dos anúncios e gere um comprovante que contenha meu ID, comprovando que o anuncio foi feito; vc poderia fazer isso? quanto me cobra? obrigado!!!
Yuri, para o projeto que vc quer,tem que ser na plataforma WordPress. Para esses tipos de projetos em wordpress, eu recomendo o Cláudio Sanches, é um excelente profissional. Verifique se ele está disponível.
Olá Vanessa, muito boa a dica, principalmente a de Como Inserir 3 Blocos de links lado a lado, mas gostaria de saber como vc colocou no meio do post…..
Aqui no Mundo Blogger eu uso um plugin para wordpress.
Vanessa Boa Noite!
Como Faço Pra Por Anúncios De Blocos De Links E Banner Como Você Fez Aqui?Isso Nas Postagens Conforme Esta Nesta Página No Meu Tem Entre As Postagens O Banner E Queria Por Também Um Bloco De Links Assim Como Você Fez,Abraços E Fique Com Deus…
Ótima postagem, excelente dica! Apliquei em meu blog e funcionou direitinho! Gostaria de acresentar 3 itens:
1 – Ao nomear o bloco de anúncios no AdSense, não utilizar acentos. Por exemplo, eu havia criado um bloco de anúncios que tinha a palavra “Botão” no nome, após “parsear” o código, a palavra ficou assim: Botão, e ocorria um erro ao tentar incluí-la;
2 – As vezes os anúncios podem demorar alguns minutos até serem exibidos;
3 – Em alguns casos, talvez seja necessário reorganizar as postagens existentes, pois a inserção de anúncios pode desalinhar o conteúdo do post.
Muito Obrigado pela dica! Parabéns pelo blog e postagem! Abraço!
Muito bom o artigo. ótimo para quem está começando.
Vanessaaaaaaaaaa *-* Muito obrigado, muito mesmo. Perfeito tuto, deu tudo certo. 😀
qual é o anuncio que voce usa cabeçalho banner
Olá eu queria saber se eu posso colocar imagens com links no lugar desse anúncios do Adsense?
No aguardo da resposta!
Pode.
Olá Vanessa, tudo bem?
Estou tentando colocar um anúncio do Adsece abaixo do título e não estou tendo êxito. Fiz o que é descrito na sua postagem, e não mudou nada, o que posso estar fazendo errado? Já tentei de várias maneiras, até fui em outros blogs e não deu certo.
Aguardo uma resposta sua, obrigado e beijo.
Verifique se vc converteu o código do adsense. É necessário converter o código que o Adsense gera. Antes de colocar o código do adsense diretamente no seu template, você precisa converter o código.
Se não convertê-lo, seus anúncios não aparecerão.
Bom, já converti e coloquei no lugar como descrito no seu artigo e mesmo assim não não funciona. O modelo do template tem algo relacionado há isso?
Esses códigos funcionam em blogs do blogger?
Pode ser algo relacionado ao template, ou tb pode ser problema nos seus códigos adsense. Não há como eu saber. Entre em contato com o fórum de ajuda do adsense, eles poderão te ajudar.
olá equipe mundo blog,
Gostei muito do post, pois olhei muitos na internet e não falava do hack leia mai que os blogs geralmeente tem, isso me ajudou muito pois o meu tem. Obrigado pela dica!!
Olá! estava procurando justamente isso na net e vim parar em seu blog. Fiz o esquema acima seguindo o as instruções para quem tem o “leia mais” automático, porém os anuncios apareceram na página inicial do blog entre os resumos. o que eu posso ter feito de errado? uma vez que só quero que ele apareça dentro das postagens
Andreza
dúvidas a respeito do código do adsense ou conta do adsense: reporte diretamente ao próprio adsense! Eu não tenho como ajudar.
Obrigada.
Olá Clau, desculpe o incomodo, mas vs sabe me dizer pq no meu blog não aparece o anúncio?
Desde já agradeço.
Clau! Umilde como Sempre!
Obrigado pela dica, sou novato e isto ajudou me bastante!
Olá Clau,
Parabenizo pelo post e pela atenção a todos.
Bom, tenho certa dúvida, eu gostaria de saber como botar o anuncio diretamente no html, sendo que ficaria acima das postagens na parte de fora, seria como o que está no inicio desse post só que como falei.Pesquisei aqui mas não encontrei ou pelo menos não vi nitidamente ( para mim ^^).
Agradeço desde já.
@sjodiel
Que bom! Fico feliz pelo retorno.
Clau, já rescolvi o meu problema… graças as suas dicas..
Pessoal,
Por favor, dúvidas a respeito do código do adsense ou conta do adsense: reportem diretamente ao próprio adsense! Eu não tenho como ajudar.
Obrigada.
Legal… só que eu gero a receita e já anexa direto
não gera nenhum código para copiar e depois parsear!
Onde aparece o código??
Ojuara
Fico feliz que tenha gostado. Obrigada pelo comentário 😉
Muito bom esse artigo!
Parabéns… Abraço do Ojuara
link
Recomendo que vc dê uma pesquisada no google ou no proprio blog de ajuda do adsense.
@sjodiel
Recomendo que vc pergunte diretamente à própria Juliana, do Dicas Blogger para saber como ela fez.
Como faço para colocar 2 bloco de anuncios lado a lado, assim como está Dicas Blogger
èee, clauu?, eu me esqueci hehe, pode me dizer como eu gero o código do adsense? eu já tenho a conta confirmada, mas não vejo essa opção lá, faz tanto tempo, como? hehe?
Muito bom o post muito obrigado por disponibilizar o guia desse super simples valeu mim salvou acesse meu blog tambem http://blog-resenha.blogspot.com/
Eduardo/centraldecolchoes.com.br
Não!
Eu tô usando somente 1 anúncio (em banner)do adsense abaixo do título do post, o outro q está abaixo é do programa de afiliados da Uol.
No meu caso, adsense eu uso: 1 bloco de anúncio abaixo do titulo + 1 bloco no rodapé do post + 1 bloco na sidebar. Acho q com isso atingi o limite de 3…eu acho né?rs
Os demais anúncios são de outros programas de afiliados.
Espero que tenha ajudado.
Sim Clau… o que fica abaixo do título. Mas ao que me parece tu estas colocando dois anúncios alí..um abaixo do outro..e depois, no fim do post, tu repetes a mesma situação.
Daí não ficam 4 anúncios? Acima dos três possíveis pelo Adesense?Desculpa se estou dizendo uma bobagem!!!!
Abraço! Eduardo.
Heartagram Lover
Pra te falar a verdade, eu criei o formsprings mas nem uso. Meu tempo anda "meio" escasso e não dá pra ficar respondendo perguntas lá toda hora..rs
Prefiro me dedicar mais ao blog. =D
centraldecolchoes.com.br
De qual vc está falando? O que fica abaixo do título do post?
Oi Clau!Excelente este Tutorial.Poderia explicar como fazes para esta nova colocação que tens utilizado para o Adsense?
Abraço!Eduardo.
Clau, menina vc é muito inteligente… nossa lindo o seu blog com todas essas explicações, eu tenho te add no forms mas vc nunca aparece!
Se puder me segue também!
Ta de parabéns viu!
Bruno Costa
O q eu fiz foi adicionar 2 gadgets de marcadores na sidebar. É fácil, mas se vc quiser eu posso publicar um tutorial explicando melhor como faz…inclusive já ando preparando mesmo alguns falando sobre marcadores.
Beto Default
Obrigada pelo comentário.
Muito boa, essa dica, Clau ^^ Parabéns.
Estou doido pra te perguntar uma coisa mas não achei outra forma de contato, então vai por aqui mesmo:
Olhei que no teu sidebar tem 2 gadgets de Labels ("categoria blogger" e "outros conteúdos"), como é isso? Como você conseguiu separá-los?
Will
Obrigada!
Fabiano Roberto
Testa sim! eu recomendo. Obrigada pela visita!
Anselmo
É verdade. Obrigada pelo comentário.
Voltem sempre!
Essencial para quem pensa em trabalhar com blogs profissionalmente.
Excelente artigo.
achei bem interessante a idéia de anuncio dentro da postagem, se vou usar ou não ainda não decidi, mas certamente vou testar rsrs, sou viciados em códigos rsrs
Você é demais Clau!