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='http://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='http://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

• Colocar div acima da postagem blogger
• Como colocar adsense acima dos posts no BlogSpot
• Exibir adsense entre postagens do Blogspot

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='http://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.