Modelo de rodapé para posts no Blogger – Adsense, Artigos relacionados e ícones sociais

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Muita gente entra em contato perguntando como fazer um rodapé de artigos como o que uso aqui no [ Ferramentas Blog ]. Ele aparece em todos os artigos e consta de espaço para banner e links de publicidade, lista de artigos relacionados com imagem e ícones de redes-sociais e contato para fidelização de visitas. Vou mostrar como adicionar isso em seu blog no Blogger (blogspot).

O modelo que uso é semelhante ao da imagem abaixo:

rodape-posts-blogger

São três blocos de informação num único código que você pode colocar e fazer aparecer em todos os artigos, melhorando as conversões de fidelização, cliques nos anúncios e oferece mais opções de artigos para ler.

Vamos usar aqui três tutoriais que já ensinei separados, mas vamos juntar numa única coisa:

Qualquer mudança ou adaptação que você quiser fazer no que vamos ensinar abaixo, bata seguir os tutoriais que citei aqui.

Modificando o rodapé dos artigos.

O processo é longo e envolve muitos códigos, mas é simples de fazer, por isso tenha muita atenção e use um blog de testes antes de aplicar em seu blog principal.

Passo 1: Adicionar o CSS dos artigos relacionados.

Se você NÃO usa o modelo de artigos relacionados que vamos mostrar, vai precisar adicionar o CSS no código fonte de seu blog. Então abra o painel do Blogger e clique no menu “Layout” ~> “Editar HTML” e procure pela linha “</head>” e, imediatamente ANTES dela, insira o código abaixo sem modificar nada:

<!--Artigos Relacionados Estilo e Script Inicio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Artigos Relacionados Estilo e Script Final-->

Salve o modelo para aplicar as modificações.

Passo 2: Se usar o AdSense como publicidade

Se você vai usar o Adsense como publicidade, recomendamos o modelo de bloco de anúncios nas medidas de 300×250. Mas não basta ir ao painel do Adsense para gerar o código, pois esse código para aparecer no código-fonte do Blogger precisa sofrer uma modificação.

Depois de gerar o código do modelo de anúncio pegue esse código e abra o seguinte site:

  • Centricle: Encode / Decode HTML Entities

Lá você verá um painel. Cole o código do Adense ali ficando como no exemplo da imagem abaixo:

encode-html-codigo

Então clique no botão “Encode” e o código que será gerado é o que vamos usar nesse tutorial. Ficará algo parecido com o exemplo da seguinte imagem:

encode-html-codigo-mudado

Guarde isso ou deixe a janela aberta para usar na hora certa esse código gerado do AdSense.

Passo 3: Adicionando o código no rodapé dos posts

Agora vamos juntar tudo, mexer nos ícones das redes-sociais, e adicionar o novo rodapé de todos os seus artigos.

Abra o painel do Blogger, clique no menu “Layout” ~> “Editar HTML” e marque a opção “Expandir modelos de widgets” para ver todo o código-fonte de seu blog, como ilustra a imagem:

layout-editar-html-expandir-widget

Procure pela seguinte linha:

<div class=’post-footer’>

Imediatamente ANTES dela cole o seguinte trecho só modificando o que estiver indicado:

<!-- Rodape dos artigos Inicio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<table border='0' cellpadding='0' cellspacing='0' unselectable='on'><tbody>
<tr>
<td valign='top'>
<!-- AdSense Rodape Inicio -->
.......... Código do Adsense modificado ..........
<!-- AdSense Rodape Final -->
</td>
<td valign='top'>
<!-- Codigo Artigos Relacionados Inicio -->
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&a
mp;amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=3;
var relatedpoststitle=&quot;Leia mais sobre:&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
<!-- Codigo Artigos Relacionados Final -->
<br/>
<!-- Icones sociais inicio -->
<div align='right'>
<table border='0' cellpadding='2' cellspacing='0' width='260'><tbody>
<tr>
<td width='65'><a href='URL_Endereço_FEED' title='Assine nosso Feed'><img src='https://ferramentasblog.com.br/imagens/icone-RSS.png'/> </a></td>
<td width='65'><a href='URL_do_seu_TWITTER' title='Para seguir no Twitter'><img src='https://ferramentasblog.com.br/imagens/icone-twitter34.png'/></a></td>
<td width='65'><a href='URL_PERFIL_FACEBOOK' title='Amigos do FaceBook'><img src='https://ferramentasblog.com.br/imagens/icone-facebook.png'/></a></td>
<td width='65'><a href='URL_PÁGINA_CONTATO' title='Entre em contato conosco'><img src='https://ferramentasblog.com.br/imagens/icone-contato.png'/></a></td>
</tr>
</tbody></table></div>
<!-- Icones sociais final -->
</td>
</tr>
</tbody></table>
</b:if>
<!-- Rodape dos artigos Final -->

Substitua a linha verde pelo código modificado do AdSense feito no Passo 2.

Onde está marcado de rosa, coloque as suas informações para os 4 ícones sociais.

Salve o modelo e já estará adicionado o rodapé de todos os posts de seu blog.

Esse modelo economiza espaço no rodapé dos artigos e tem tudo o que você precisa num só espaço, facilitando a navegação por seu conteúdo e dando destaque às sua publicidades e redes-sociais preferidas.

Se for usar outro tipo de anúncio, nunca coloque nada menor que 250×250 para manter o padrão da estrutura.

Outros artigos que podem te ajudar:

.

27 Comentários

  1. Marcos,no meu template não deu certo,apareceu uma mensagem em vermelho dizendo que não era permitido os caracteres '–' dentro dos comentários,eu procurei por esses caracteres para apagar dentro do código dos comentários e não achei,como eu faço agora?

    Responder

  2. d4rk e Allison

    Verifiquem se não apagaram nada indevido no código acima e se estão no local indicado para adicionar essa função.
    Os erros relatados são típicos disso.

    Responder

  3. Olá, Marcos no meu caso aconteceu o mesmo caso do alison, Ajuda dizer que meu template é o antigo do ferramentas blog, que foi disponibilizado.

    Responder

  4. Olá Marcos!

    Consegui fazer tudo que você descreve aqui neste artigo,mais será que você não tem alguma "manha" para que funcione corretamente no Internet explore (eu uso o 8 só para testar)pois no crome e Firefox está 10 mais no IE não aparece o anuncio (300×250)…disse isto porque no mundodarkeness a Clau deu uma dica para que ocodigo repeat-x funcionasse corretamente,era só dar um espaço e cada palavra(só 1)para que a imagemse multiplicasse da forma que queria.

    Obrigado pela atenção!

    Rafael Avelino

    Responder

  5. @Rafael,
    Esse é o mesmo código que uso e o meu funciona perfeitamente no IE8. Reveja os passos pois vc deve ter feito algo errado na hora de adicionar o código do AdSense e seu banner.

    Responder

  6. Marcos , no meu também deu erro . Não quero usar anuncios do Adsense , mas sim meus proprios anuncios como você mesmo faz , aí coloquei o codigo da imagem com o link no lugar do codigo do adsense , mas fica dando esse erro :

    Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The element type "img" must be terminated by the matching end-tag "".

    agradeço se puder ajudar !

    Responder

  7. @Elton,
    Veja o código que vc colocou no seu banner no lugar do anúncio… Esse erro é no seu código de imagem. O código acima está funcionando perfeitamente.

    Responder

  8. @Charles,
    Do mesmo modo que você adiciona imagens em qualquer lugar de seu blog. O código de imagens pode ser aplicado aí sem problemas. Mas lembre-se de colocar uma imagem nas proporções de no mínimo 250×250 (são as medidas em px).

    Responder

  9. Olá, Marcos!

    Fiz tudo certinho como está no tutorial, só que as imagens das redes sociais não aparecem. O que pode ter acontecido de errado? Pode me ajudar?

    Responder

  10. @Luciano,
    É bem provável que você tenha apagado algo indevidamente. Verifique se realmente nào mudou nada no código das imagens.

    Responder

  11. Curioso… não é em todos os layouts novos do blogger que este recurso aparece, quando adiciono o código. Estranho, né?
    Abraços!

    Responder

  12. Perfeito! apanhei em relação aos artigos relacionado, pois o meu template na parte de postagem é menor mais dei um jeito, valeu.

    Responder

  13. Olá Marcos

    Aconteceu comigo o mesmo problema do Allison, e não consegui encontrar os tais erros, ai resolvi copiar linha por linha dos códigos das redes sociais e salvado e por ultimo colei o código do Adsense alterado. Assim funcionou, entretanto tive de deixar de fora o link da conta facebook pq acusava um erro de "id".

    Responder

  14. Marcos, tenho de te render saudações floripanas.
    Hoje estive procurando barras de compartilhamento e eis que abro meu email…rs
    Obrigada pela dica
    Sirley

    Responder

  15. Pingback: Botoes AddThis para compartilhar seu blog nas redes sociais | [ Ferramentas Blog ]

  16. Não consegui “Adicionar o CSS dos artigos relacionados”, dá o seguinte erro:

    “Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The content of elements must consist of well-formed character data or markup.”

    Responder

  17. Tem algo de errado no Passo 3
    O 1 e o 2 funcionam perfeitamente
    mas é só chegar no 3 que da erro

    “Corrija o erro abaixo e envie o seu modelo novamente.
    Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The reference to entity “a” must end with the ‘;’ delimiter.”

    Muito obrigado Marcos você me ajuda muito

    Responder

  18. Eu tentei colocar no worpress o código ants da tac não funcionou, desconfigurou minha página existe outra maneira de fazer isso no wordpress.org?

    Responder

  19. Obrigada Marcos eu tentei colocar apenas o código das imagens funcionou, porém não aparecer os artigos relacionados. uma pena mais ficou legal. você pode me indicar algum plugin? que seja na mesma estrutura? eu fico agradecida pela resposta e espero que me ajudade @sumellooficial Valeu Marcos.

    Responder

  20. Marcos, obrigado pelo post, mas, não funcionou no meu template.
    Como fazer quando o template possui vários “post-footer”? Onde exatamente colar o código?

    Você poderia fazer uma modificação neste código e inserir uns 3 posts relacionados (sem miniaturas), com letras em negrito e um pouco maiores que o texto do conteúdo do blog. Acho que ficaria legal.

    É interessante também lançar outro post como este, pois, não há nenhuma outra alma viva na internet que postou algo como este, exceto um blog que vi, mas os links relacionados eram muito toscos e desformatados, e só apareciam as imagens, além de não ensinar a postar o adsense, somente uma imagem qualquer ao lado das 9 miniaturas de “posts relacionados”, e ai, ficou muito feio.

    Seus posts nos ajudam muito! Obrigado novamente.

    Forte abraço!

    Responder

Deixe um comentário

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