Anúncio Adsense abaixo do título do post no blogger

Mostrarei como adicionar Anúncios Adsense abaixo do título das postagens no blogger, usando Html.

Para adicionar adsense abaixo do título da postagem do BlogSpot é preciso muita atenção, você deve estar ciente que é algo difícil para a maioria, pode ser demorado, dessa forma é mais apropriado para blogs/site que tem muitas visitas ou sabe que não vai mudar seu Template tão cedo.

Varias coisas devem ser consideradas:
  • Só é possível fazer isso no Html do blogger e deve fazer um backup de seu código antes.
  • Na Home(Página Inicial) e na página de categoria o anúncio não deve aparecer abaixo do título, isso porque essas páginas acumulam mais de duas postagens e, por exemplo, dentro da Home no segundo post e os que seguem abaixo o anúncio pode não aparecer e ficar um quadro vazio. Para isso será usado um código para impedir que o anúncio apareça abaixo do título nessas páginas, e outro código para anúncio acima do título só nessas páginas onde eles não aparecerão abaixo do título do post.
  • Alguns caracteres do código do Adsense deve ser mudado um pouco para funcionar no Html do blogger.
  • Como você quer que o conteúdo da postagem se comporte? ou seja, se o anúncio for menor que a largura da postagem, o texto poderá ficar ao lado do anúncio, mas, para isso é preciso colocar o anúncio dentro de uma nova DIV com float
A postagem será dividida em duas Partes, a parte 1 para o anúncio abaixo do título da postagem e a parte 2 para os anúncios na Home, categoria, e qualquer página do blogger que acumula varias postagens.


Parte 1

Adsense abaixo do título da postagem, apenas na postagem individual

Você deve Expandir modelos de widgets para encontrar o local abaixo do título.
Para adicionar códigos abaixo do título do post eles devem se adicionado acima desta linha:



<div class='post-header-line-1

Ou, se você usa alguns elementos como a classificação de estrelas entre o post e o título e quer logo abaixo delas(acima do texto do post), nesse caso pode adicionar códigos acima de:

<div class='post-body


O código impede algum elemento na Home ou categoria, ou seja, faz aparecer algo só nas postagens individuais(única, sozinha):
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div>



Código do Adsense ou outros aqui só aparecem na página da postagem

</div>
</b:if>



Agora veja o código o mesmo acima junto com o exemplo de Código do adsense, porém, ele não funcionaria dessa forma, deixarei em vermelho os dois caracteres que daria problema.

Você deve observar qual caracter do código adsense da problema e alterar o seu, não deve copiar todo esse código de exemplo, mas sim, aprender com ele:
Exemplo A: com os dois caracteres que darão erro

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


<script type='text/javascript'><!--
google_ad_client = "pub-XXXXXXXXXXXXXX";
/* 300x250, criado 22/03/10 */
google_ad_slot = "xxxxxxxxx";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script src='//pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'>
</script>

</div>
</b:if>




Agora, o código parecido com o que funcionaria no blogger, porém, esse código de adsense abaixo é uma cópia, você deve obter o seu na página do Google adsense e substituir os dois caracteres que causam o problema no blogger(erro de Xml). Compare o exemplo acima com esse e veja onde modifiquei.
Esse problema só acontece no Html do blogger, e, não nos gadgets ou Elementos da página do blogger
Exemplo B: Com os dois caracteres modificados e "corrigidos"

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


<script type='text/javascript'>&lt;!--
google_ad_client = "pub-XXXXXXXXXXXXXX";
/* 300x250, criado 22/03/10 */
google_ad_slot = "xxxxxxxxx";
google_ad_width = 300;
google_ad_height = 250;
//--&gt;
</script>
<script src='//pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'>
</script>

</div>
</b:if>



Para adicionar o seu código adsense no Html do blogger, você deve obter seu código adsense na página do Google adsense e mudar apenas dois caracteres como fiz acima, e, substituir o meu código adsense pelo seu. Agora, veja como pode Adicionar o Adsense direto no Html do blogger.
  • Acesse o Blogger.com
  • Clique em Design
  • Clique em Editar Html
  • Marque a opção Expandir modelos de widgets
    Exp:

    Expandir modelos de widgets
  • Localize <div class='post-header-line-1 ou <div class='post-body
  • Acima/antes de um desses códigos adicione seu adsense modificado(parecido com o exemplo B)
  • Clique em SALVAR MODELO




Parte 2

Adsense acima do título do post na Home e Categoria/Marcadores

Essa parte não é necessário, mas é interessante pois, como acima mostrei como colocar o adsense abaixo do título da postagem, mas, só nas postagens individuais e não na Home, isso porque a Home aglomera vários posts, e, o número de anúncios que o Google exibe é limitado, sendo assim os posts mais abaixo da Home exibiriam um quadro vazio abaixo do título de alguns posts, que seria onde deveria aparecer os anúncios.
Adicionar código que cria o adsense personalizavel no blogger para Home:
  • Acesse o Blogger.com
  • Clique em Design
  • Clique em Editar Html
  • localize esse trecho <b:widget id='Blog1' e, logo acima dele adicione:
    <b:widget id='AdSense5' locked='false' title='' type='AdSense'>
    <b:includable id='main'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div class='widget-content'>
    <data:adCode/>
    <b:include name='quickedit'/>
    </div>
    </b:if>
    </b:includable>
    </b:widget>
  • Clique em SALVAR MODELO
  • Após isso, na página Layout Design e, Elementos da página, você encontrará o quadro Adsense, e clique em Editar e depois de pronto SALVAR
  • Nessa imagem, onde você vê Layout agora foi substituido pela palavra Design, Atualização:2010
    Clique para aumentar
    Adsense no blogger acima do titulo do post


Dicas e detalhes importantes

O Gilvancn me alertou que na Parte 1(adicionar o anúncio na área do post) estava dando problema, ele funcionava, mas sumia ao usar os botões voltar e avançar dos navegadores, então fui ver e o problema pôde ser resolvido simplesmente adicionando o anúncio em uma div e, resolvi facilitar um pouco para quem quiser que o anúncio fique do lado do esquerdo texto, vou colocar o exemplo de código, mas, lembrando que é para se espelhar nele e não copiar, você deve obter seu código do adsense no site.
Código Exemplo, adsense na área do post e texto ao lado

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:left;width:310px;'>


<script type='text/javascript'>&lt;!--
google_ad_client = "pub-XXXXXXXXXXXXXX";
/* 300x250, criado 22/03/10 */
google_ad_slot = "xxxxxxxxx";
google_ad_width = 300;
google_ad_height = 250;
//--&gt;
</script>
<script src='//pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'>
</script>

</div>
</b:if>


Perceba que no código acima agora tem style='float:left;width:310px;' esse código é um estilo Css que fará a largura da div ser um pouco maior que a largura do anúncio e faz a div aceitar outras coisas do lado direito, se usar, é bom que comece o post com textos.

float:left; Faz o elemento que o usa aceitar textos ou outros do lado direito

width:310px; Faz o elemento que o usa ter largura 310 pixeis, você pode mudar a largura aumenta ou diminuindo o número.

Finalizando, no exemplo acima eu vi que o anúncio tinha uma largura de 300 pixeis, foi só observar esse trecho do anúncio width = 300; e usei o style Css para dar uma largura um pouco maior para a Div que tem o anúncio
<div> Isso é colocar algo dentro de uma div </div> e assim pode controlar e estilizar o que está nela.

Um detalhe importante é que, se for fazer com que o anúncio fique ao lado do texto é bom deixar um espaço no lado dele para no mínimo umas três palavras, ou ficará muito feio e confuso, para isso é bom saber a largura da área do post e do anúncio, geralmente a área de post tem uns 400px mas vária de modelo.
Área de gatget acima do título do post, só na Home
Isso é para substituir a Parte 2 e, realmente, não aconselho a fazer isso, como disse acima essa parte não é necessária e pode gerar confusão, mas vou ensinar.

Na Parte 2 desse post ensinei adicionar um código para fazer com que o adsense seja configurado no próprio blogger, mas, se você quiser colocar na Home o código que pegou no próprio site Adsense? Ou outro código só na Home?

Sendo assim, vou mostrar o código para substituir aquele que mostrei na Parte 2, e, esse vai criar um gadget vazio na página Elemento da página de seu blogger, mas, você precisará estar sempre atento para não esquecer que aquele gadget, naquele local é só para a Home e páginas com vários posts.

<b:widget id='HTML999' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='widget-content'>
<data:adCode/>
<b:include name='quickedit'/>
</div>
</b:if>
</b:includable>
</b:widget>


Para você não esquecer que esse gadget é só para Home, pode adicionar dentro do gadget, no momento que colocar código nele esse lembrete:
<!-- GADGET DA HOME -->
Adicione essa linha de código acima do código, mas não onde vai o título, essa linha não vai aparecer em seu blog, ela é "invisível", geralmente são usados para lembretes em páginas de Html.

16 comentários:

Anúncio Adsense abaixo do título do post no blogger2010-03-30T11:59:00-03:00
  1. Anônimo21/4/10

    Este comentário foi removido por um administrador do blog.

    Responder
  2. Muito bom, mas eu gostaria de colocar o anúncio abaixo do título do post, mas só na postagem completa.

    Responder
  3. Joao Bob

    Só a parte 1 desse post mostra como adiciona o adsense abaixo do título do post só na postagem. Se você não fizer a parte 2, tudo bem, mas, a parte 2 seria para compensar esse anúncio que faltará na home(acima dos posts).

    Responder
  4. Excelente, funcionou perfeitamente ..

    Responder
  5. ótimo artigo, ajudou e funcionou certinho.

    Responder
  6. Olá amigo, coloquei esse hack no meu blog e aparentemente deu certo, só depois quando abri outro navegador verifiquei que não deu certo no chrome e no opera, só deu certo no firefox veja um print de como ficava em ambos navegadores:http://img689.imageshack.us/img689/4924/adsenseo.jpg
    Você teria alguma sugestão, vale lembra que meu template é customizado, sou usuário novo do blogger e sempre to dando uma olhada no seu blog, agradeço se puder me ajudar.

    Responder
  7. gilvancn

    Talvez é preciso aguardar algum tempo, usei esse procedimento num blog de teste a aqui funcionou no Chrome

    Se você fez tudo corretamente o problema pode ser na configuração do Pc ou ou navegador, talvez alguma configuração de "segurança" de um deles, ou, até mesmo o tempo que o google leva para gerar um anúncio, "bugs" relacionados também acontecem, geralmente são passageiros, pode ser até interferência de um outro script, já que alguns são interpretados de forma diferente por alguns navegadores, eu mesmo já percebi alguns anúncios meus não funcionarem ou ficar com fundo branco em um navegador e no outro normal, isso foi passageiro, isso as vezes acontece quando altero algo no site adsense.

    O Opera é pouquíssimo usado hoje, para não precisar mexer na configuração do navegador ou Pc você poderia ver se o mesmo acontece em outro Pc

    Responder
  8. Obrigado amigo por responder-me prontamente. Pude perceber no seu blog de testes que não tá mostrando o adsense no IE8 e sim 2 ranking de estrelas, porque? Obrigado pela atenção.

    Responder
  9. gilvancn

    Obrigado, não tinha percebido, mas isso acontecia ao usar botão voltar do navegador, já resolvi colocando o anúncio numa div e atualizei o código no post

    Responder
  10. gilvancn

    Não vi nada de errado com seu blog, no caso de seu modelo, o código da Parte 1 você pode adicionar abaixo de <div class='entry'> que vai dar certo.

    Só para quem tiver modelo que não do blogger ou... problemas em colocar código logo acima do post e abaixo do título, fica um pouco acima de data:post.body/

    Responder
  11. Valeu, brigadão pelas dicas!!!

    Responder
  12. Depois de diversos codigos por ai, este foi o único que funcionou...obrigado

    Responder
  13. Eu não consigo de forma alguma colocar no post.
    Entao vai uma pergunta. Tem como eu colocar na hora que estiver postando ?
    Ou seja colocar em cada post ?
    Meu site:

    http://comonuncapenseinisso.blogspot.com

    Obrigado.

    Responder
  14. Carioca

    Os anúncios demoram um pouco para aparecerem.

    Provavelmente você pode adicionar o adsense na postagem, mas precisa deixar todo o código do script na mesma linha, mas, isso vai te trazer problemas como:Nas páginas onde aparecem mais de um post juntos(como na Home) após o 3º post pode ficar um buraco no local do anúncio, outro problema é que se um dia você resolver colocar anúncios na lateral e não nas postagens, aí os da lateral podem não aparecer quando houver mais de 3 anúncios que estão nos posts de páginas como Home, categoria e arquivadas, e, se você resolver retirar serão vários códigos, neste sistema que apresentei acima serão só um ou dois códigos e apenas na opção Editar HTML do blogger.

    Eu sei que isso é difícil de fazer, você pode dar um tempo e tentar novamente num momento/dia que estiver mais descansado ou quando tiver mais habituado com o HTML do blogger, aí leia novamente, provavelmente algum detalhe você esqueceu ou errou.

    Responder
  15. Cara parabéns pelo seu post..estava procurando a muito tempo mas ñ achava de jeito maneira rsrsrs parabéns sucessos!!!!

    by:Sr.Poles

    Responder
  16. Olá,
    Cara eu já fucei blogs de todos os tipos onde 'diziam' fazer o que você fez. Mais em tdos nao funcionava, finalmente o teu me salvou! Valeu irmão!

    Responder

→Dê sua opinião. Faça comentário relacionado ao post.
Comentário com e-mail será excluído
Antes de perguntar leia o texto até comentários e pesquise, a resposta virá no comentário, para ser avisado use uma conta e o link: Subscribe by email(abaixo)
Será excluído comentário não relacionado ou com Url de blog/site(Divulgar? Clique)

Comentário reflete a opinião do comentarista. Desde já, Obrigado!