Há partes muito importante na estrutura de seu blog que podem, se bem usadas, melhorar a navegabilidade de suas páginas, mantendo o leitor por mais tempo e até gerando receita, ganhos, para o seu trabalho com blog. Não é apenas a barra lateral (sidebar) que deve ser usada para chamar a atenção dos visitantes, nem é o único lugar para colocar publicidade. O roda-pé dos artigos e abaixo dos títulos são lugares privilegiados e é bom saber colocar elementos ali.

 

Nesse tutorial vamos entrar um pouco mais no código-fonte de seu blog para entender como personalizar as partes que cercam seus artigos e usar isso a seu favor. É bom conhecer um mínimo das partes do código-fonte do template que você usa para que você possa usar de forma mais eficiente os recursos disponíveis.

Essas partes podem ser usadas de várias formas. O que mais recomendamos é que seja para adicionar elementos permanentes, que precisam aparecer em todos os artigos da mesma forma, como o link para assinar Feeds ou alguma publicidade. Mas fica por conta da sua imaginação.

 

Sempre que for fazer qualquer modificação em seu código-fonte recomendamos duas coisas. Primeiro que faça testes: tenha um blog só para testar mudanças no template e evitar sustos no original. Assim você vê como ficará e só vai aplicar o que ficar perfeitamente funcionando. Segundo: faça um backup de seu modelo de template. Caso algo sair errado ou você quiser reverter o processo e não souber como fazer ou perder algo importante em seu layout, basta restaurar a cópia:

• Backup no Blogger – seu Blog seguro

 

Vamos usar aqui como padrão o modelo de template básico do Blogger, que é o Minima. Assim temos algo comum para que depois você faça seus testes e verifique como está em seu template.

Veremos como adicionar elementos às partes indicadas como exemplo na imagem:

 

 

Vá no menu “Layout” ~> “Editar HTML” e marque a opção “Expandir modelos de widgets”.

 

Parte 1 – Abaixo do Título dos Artigos.

Procure por:

 

<div class='post-header-line-1'/>

 

Essa é a linha que indica onde você vai colocar o que desejar aparecer abaixo dos títulos de seus artigos. Você pode colocar qualquer coisa, de um simples texto, à imagens e links ou mesmo banners de publicidade do AdSense ou de outro programa afiliado que você participa. Aqui no [ Ferramentas Blog ] você pode ver que temos um bloco de anúncios do AdSense e um ícone de Feed para divulgar este serviço e incentivar que acompanhem nossas atualizações.

Assim, tudo o que você colocar aí, imediatamente abaixo dessa linha de código, aparecerá seguindo o título de seus artigos.

 

Parte 2 – No roda-pé dos Artigos.

Essa é a parte que precisa de um pouco mais de atenção, pois é preciso fazer testes para ter certeza de que ficou posicionada abaixo dos artigos, sem erro. Basicamente existem três linhas que compõem o roda-pé dos artigos e é preciso testar em seu template qual será a mais adequada para incorporar o que você quiser colocar ali.

Procure por:

 

<div class='post-footer'>

 

E, abaixo disso tente encontrar as seguintes linhas (elas não vêem todas juntas, então procure por cada uma individualmente):

 

<div class='post-footer-line post-footer-line-1'>

<div class='post-footer-line post-footer-line-2'>

<div class='post-footer-line post-footer-line-3'>

 

Pode-se entender que o roda-pé de todo artigo é composto, portanto, por três linhas. Mas a mais importante e comum é a primeira. Existem algumas variações nesse código que pode aparecer um pouco diferente dependendo de seu modelo de template, da seguinte maneira:

 

<p class='post-footer-line post-footer-line-3'/>

Em lugar de “div” virá “p” e no final uma barra “/”.

 

Configurando.

Se você simplesmente colocar algo abaixo dessas linhas, seja para aparecer depois do título ou para o roda-pé, aparecerá sempre, até na página principal. Mas, note como fazemos aqui no [ Ferramentas Blog ]: alguns elementos só aparecem quando você abre o artigo. Haja vista os blocos de anúncios do AdSense que só são vistos dentro de cada artigo e não aparecem na página principal do blog quando está com resumo de postagem.

 

Para fazer isso é preciso colocar um código condicional. Esse código é bem simples e é padrão para que qualquer coisa dentro dele só seja vista quando o artigo for aberto individualmente.

Siga o modelo.

 

Escolha onde quer colocar algo, por exemplo, abaixo do título do seu artigo, que você queira que só apareça quando a pessoa entrar no artigo. Procure no código-fonte a linha que indiquei acima na Parte 1 do tutorial e cole o que desejar da seguinte maneira:

 

<b:if cond='data:blog.pageType == &quot;item&quot;'>

O que deseja que apareça abaixo do título do artigo.

</b:if>

 

O código indicado em azul é a condicional. O que ficar entre essas linhas só vai aparecer quando se entrar no artigo individualmente. Pode ser usado no roda-pé dos artigos, seguindo as etapas da Parte 2 também.

 

Faça seus testes e modificações e aprenda a usar de forma eficiente as partes de seu blog para melhorar e personalizar cada vez mais.

 

Artigos relacionados que podem te ajudar:

• Colocar publicidade dentro dos artigos
• Melhorar posição dos anúncios do AdSense em seu blog
• Medidas de um Template do Blogger
• Delimitar quantidade de Artigos das páginas de Marcadores