Como Adicionar Anúncios Entre o Título e o Conteúdo do Post

Hoje vamos aprender a como adicionar anúncios entre o título e o conteúdo do post no Blogger/Blogspot. Atendendo a pedidos este texto trata apenas do Blogger, mas em um próximo texto vamos falar do mesmo tema para quem utiliza WordPress como CMS ok? No mais é atenção e tranquilidade. Vamos lá!

Importante: Antes de fazer qualquer alteração no seu blog salve uma cópia do seu template. Por mais que pareça besteira, por vezes um simples ponto a mais ou a menos pode estragar seu template e você acabar ficando perdido sem saber onde alterou e consequentemente não tendo como arrumar. Portanto, sempre salve uma cópia do seu template (depois não diga que eu não te avisei).

Para baixar seu template:

Clique em Expandir modelos de widgets e em seguida clique em Baixar modelo completo para salvar uma cópia do seu template no seu computador.

Importante 2: Leia todo o conteúdo do post antes de tentar fazer o que o tutorial está ensinando. Basta ter paciência e ler tudo com cuidado, seguindo os passos com atenção que não tem erro.

1. Quais anúncios você usa?

A pergunta aqui é pertinente, pois tem gente que usa anúncios UOL e outros usam AdSense, além da turma que gosta de variar e fazer vários testes (levante a mão quem quiser me acompanhar \o).

Vamos ver:

Se você usa anúncios UOL, verá algo assim:

<script type="text/javascript">
<!–

Conteúdo do anúncio

–>
</script>

Já você que usa anúncios AdSense, verá algo assim:

<script type="text/javascript"><!–

Conteúdo do anúncio

//–>
</script>

Preste bastante atenção, se os seus anúncios são parecidos com esses você deve ficar ligado nos destaques em vermelho (é claro que os seus anúncios não tem nada em vermelho, só estou usando o vermelho aqui para destacar melhor tá?). Isso vale para o UOL, AdSense e qualquer outro que tenha trechos parecidos com os mostrados acima destacando o conteúdo do código do anúncio (<!– e –> ou <!- e //->).

Agora você vai querer saber por que isso é importante certo? Hein?

Isso é importante porque se você jogar um anúncio que contenha os trechos mostrados acima direto no código do Blogger, não vai aparecer anúncio nenhum no seu blog e você vai pensar que fez coisa errada. Então, preste MUITA atenção agora!

Substitua (troque mesmo) os caracteres destacados em vermelho nos códigos acima da seguinte forma:

Este < por este &lt;

Este > por este &gt;

Por exemplo, no caso do AdSense ficaria assim:

<script type="text/javascript">&lt;!–

Conteúdo do anúncio

//–&gt;
</script>

2. Inserindo o código do anúncio no código do Blogger

Agora que você já sabe se o seu anúncio precisa ser alterado ou não e já sabe como fazer, vamos ver onde e como adicioná-lo no código do Blogger.

Em primeiro lugar, como já disse acima, salve uma cópia do seu template (sei que está ficando chato, mas prefiro isso ao ver gente reclamando que eu estraguei o seu blog).

Procure pelo código abaixo e adicione o seu código do anúncio modificado logo DEPOIS dele:

<div class=’post-header-line-1′/>

Em seguida, clique em SALVAR e pronto!

Isso irá fazer seus anúncios aparecerem em todas as partes do blog entre o título do post e o seu conteúdo.

2. b) Alternativa

Fazendo da forma como foi explicado os anúncios aparecerão em todas as páginas do blog, arquivos, categorias, etc. Inclusive na home (página inicial).

O problema aí é que você pode não querer "poluir" tanto essas páginas não é mesmo?

Se você quiser que os anúncios apareçam somente quando o post é aberto individualmente, existe um truque simples, mas que faz a diferença!

No mesmo local onde eu indiquei para que você adicionasse os anúncios (abaixo do trecho <div class=’post-header-line-1′/>), adicione o código, mas dessa vez, como está abaixo:

<b:if cond=’data:blog.pageType == "item"’>

Seu anúncio modificado aqui

</b:if>

Como você deve ter visto, são duas tags (b:if abrindo e fechando) que vão antes e depois do seu anúncio modificado. Não é legal?

Heim? O que essas tags fazem?

Ei, você não estava prestando atenção né?

As tags fazem com que os anúncios apareçam apenas no post aberto individualmente. Simples assim!

Bom pessoal, basicamente é isso! Tirando as brincadeiras do Tio Tico, o tutorial está certinho e tudo funciona como tem que ser, não se preocupe!

Faça bom uso!

Imagem: Rafael Ortman

Relacionados:

• Links: Como Separar os Links da Sidebar

• Blogger: Como Encontrar o Tamanho do Cabeçalho e Adicionar Uma Imagem

• Digitação: Tempo é Dinheiro!

• Blogger: Como Adicionar Uma Lista de Links

• Como Aumentar o Número de Pageviews

• Top Comentarista: Como Colocar Uma Lista de Quem Mais Comenta no Blog

Postado por Tico Esteves. Terça-feira, 2 de Fevereiro de 2010