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

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:

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:

• Colocar publicidade dentro dos artigos
• Gadget de Artigos Relacionados com imagens para Blogger
• Como criar menu com ícone de Redes Sociais e outras opções

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:

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:

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:

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:

• O Código-Fonte dos novos Templates do Blogger (Blogspot)
• Biografia do autor do Blog no rodapé dos posts para Blogger
• As Meta Tags de descrição do Blogger nos mecanismos de busca e questões de SEO
• Adicionar botão “Curtir” (Like) do FaceBook nos artigos do Blog – Blogger e WordPress