Exibir Conteúdo automático após “Leia mais” de posts no Blogger

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+

Muita gente vê aqui no [ Ferramentas Blog ]  a exibição de anúncios em todos os artigos imediatamente abaixo do primeiro parágrafo de todos os artigos, inseridos abaixo da tag <!–more–> de forma automática. Agora é possível fazer isso no Blogger de forma bem simples com um Script e algumas modificações fáceis de aplicar. Pode ser inserido AdSense ou qualquer outros conteúdo que preferir.

Fazer download do e-book Como Ganhar Dinheiro com Blog

Quem já visita o [ Ferramentas Blog ] a mais tempo deve ter notado que, periodicamente alteramos o conteúdo exibido imediatamente abaixo do primeiro parágrafo de nossos posts. É comum ter ali um anunciante como temos hoje em parceria com a Wix – criadora de sites. Isso é inserido com um plugin para WordPress.ORG que já ensinamos aqui:

O problema é que, para fazer a mesma coisa no Blogger não era possível ou tinha que ser feito manualmente. O que tornava mais complicado se precisasse de alterar tudo.

Então descobri um ótimo código que aplica qualquer conteúdo após a tag <!–more–> (que faz aparecer o resumo de postagem, o link “Leia mais…” para os artigos do Blogger – Inserir expansão de postagem).

Se você usa essa tag em seus artigos para criar os resumos de postagem, então poderá usar esse recurso que vou mostrar agora.

Como inserir conteúdo após o Primeiro parágrafo de Posts no Blogger

1. Abrindo o painel de controle do Blogger, clique no menu “Modelo” e depois no botão “Editar HTML”. Na janela que abrir, marque a opção “Expandir modelos de widgets” para ver todo o código fonte do seu template.

2. Agora procure pela linha:

</head>

3. Imediatamente ANTES dela, cole o seguinte trecho, sem modificar nada:

<script type='text/javascript'>
$(document).ready(function(){
$(&#39;a[name=&quot;more&quot;]&#39;).before($(&#39;#moreadsense&#39;).html());
});
</script>

4. Agora volte a procurar pela linha:

<data:post.body/>

5. E logo ABAIXO disso, cole esse novo trecho, só alterando o que estiver indicado:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='moreadsense'>
<br/>
<center>
Coloque aqui o que quiser exibir
</center>
<br/>
</div>
</b:if>

6. Salve o modelo para aplicar as mudanças.

O que colocar para exibir?

Você pode colocar imagens, links e pequenos textos, bem como qualquer bloco de anúncios do AdSense ou outro programa afiliado que desejar, desde que seja dentro das regras.

O AdSense permite esse tipo de inserção, desde que não confunda com seu conteúdo e não engane os visitantes.

No caso, para quem for usar o AdSense, precisa aplicar o Encode antes de colar o código do AdSense no código fonte do Blogger.

Acesse o HTML Entities encode and decode e, como o exemplo da imagem abaixo, cole o código do bloco de anúncios onde diz “Input” e clique no botão “Encode” para usar o código que aparecer no “Result”:

Para todo o resto, pode usar códigos HTML e texto normalmente.

Use a sua criatividade para chamar a atenção do seu público, divulgar suas redes sociais ou ganhar mais dinheiro vendendo anúncios nesse espaço exclusivo.

Aprendi esse recurso no My Blogger Tricks (em inglês).

18 Comentários

  1. Além de anúncios, pensei também em colocar Call to Actions (CTA’s) também. Fazer com que o leitor realize alguma ação desejada por você. Vou já ver aqui no blog pra me poder usar. Vou gastar um tempinho vendo como usar de forma criativa esse espaço depois do “more”. 😀
    Obrigado Marcos Lemos pela dica!

    Responder

  2. Obrigado pela dica, Marcos. Já estou utilizando em meu blog. Coloquei um link para os leitores se inscreverem no meu canal do YouTube, além de um anúncio, rsrs.

    Abraços!

    Responder

    • Essa é uma ótima ideia: promover alguma rede social do seu blog para atrair mais assinantes ou visualizações para vídeos. também fiz o mesmo em meu blog para gerar mais seguidores no Twitter e deu ótimo resultado.

      Responder

  3. Olá Marcos,

    Em meu blog também não funcionou. Deixando claro que eu uso um hack para os resumos de postagens automático.

    Ele funciona junto com o resumo automático? Ou é só para quem faz o resumo manualmente?

    Desde já Obrigado.

    Responder

      • Olá Wesley e Marcos;

        Este código é fabuloso. Infelizmente não poderei usar em todos os blogs porque a maioria deles são como o do Wesley “hack para os resumos de postagens automático”.

        Bom, se vcs algum dia descobrirem como colocar um código depois do “Leia Mais” para blogs estilo revista, adorarei saber o código.

        Abç.

        Responder

  4. Pingback: Como usar "Leia mais" no Blogger

    • Precisa saber se o seu limite de blocos não passou.
      Lembre-se que em cada página só podem ser exibidos 3 blocos de anúncios. Se tentar inserir um quarto anúncio, ele não vai aparecer. Pode ser o seu caso.

      Responder

    • Paulo,

      em todos os seus artigos você colocar o código “more”? Só funciona se tiver isso. Se sim, certifique-se de ter seguido os passos corretamente, sem alterar nada.

      Responder

  5. Marcos, acrescentei em meu blog este código, mas ele aparece duas vezes na postagem, no lugar que deveria ser (depois do ‘leia mais’) e no fim da postagem. Tem como eu concertar isso?

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.