Biografia do Autor do post no rodapé do Blogger

Pois bem, hoje você vai aprender como incluir um pequeno texto descrevendo o autor da postagem que aparecerá de forma automática, e pode ser implementado em blogs que possuem apenas um autor, ou em blogs que possuem diversos autores.
Neste hack, a pequena biografia aparecerá de acordo com o autor do post publicado, ou seja, cada autor que publicar uma postagem terá sua biografia apresentada no rodapé do post em questão.

Para esta implementação será necessário a incorporação de algumas linhas de código no HTML e inserção de CSS em seu template.

1º passo – Aplicar estilos CSS:

Vá no menu “modelo”, entre na edição HTML do seu template, não precisa clicar em “expandir modelos de widgets” e procure pela tag ]]></b:skin>
e cole o seguinte código logo ACIMA dela: (edite os campos destacados)

.bio-autor{
margin:10px 2px 20px 2px;
padding:5px 0 15px;
border-top: 1px dotted #000; ---/* edite cor da borda */
border-bottom: 1px dotted #000; ---/* edite cor da borda */
}
.autor-avatar{
float:left;
margin:5px; 
}
.autor-text{
color:#494949; ---/* edite cor da fonte */
font-style:none;
font-size:12px;  ---/* tamanho da fonte do texto */
text-transform:none;
padding:5px;
margin-left:5px;
}
.autor-text p{
padding:0 auto;
margin: 0 auto;
text-align: justify;
}
.autor-text h3{
text-transform:none;
font-size:17px; ---/* Tamanho da fonte do título */
color:#777; ---/* edite cor da fonte */
font-weight:bold;
margin-top:-5px;
}
.autor-text a:link, .autor-text a:visited{
font-size:12px;
text-transform:none;
}

Salve!

2º passo – Incluir o código HTML:

Volte no menu “modelo”, entre na edição HTML do seu template, clique em “expandir modelos de widgets” e procure pela tag

<div class='post-footer'>

E cole logo ABAIXO dela:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;NOME-DO-AUTOR&quot;'>
<div class='bio-autor'>
<div class='autor-avatar'>
<img alt='Nome do Autor' height='75' src='ENDEREÇO-DA-IMAGEM' width='75'/>
</div>
<div class='autor-text'>
<h3>Sobre o autor</h3><p><b>Nome do Autor</b> Coloque aqui o texto que você deseja usar para descrever o autor. Recomendo que não tenha mais que 3 linhas. Se quiser coloque um link para a página do blog que fala mais sobre o autor.
<a href='LINK'>Leia Mais sobre o autor...</a>
</p>
</div>
</div>
</b:if>
</b:if>

Edite os campos destacados em vermelho, incluindo as informações que se pede e inclua o texto para descrição do autor no local destacado em verde.

[alerta]ATENÇÃO:
No código acima, no campo para incluir o nome do autor, deve ser escrito de forma exata. Deve estar exatamente igual a que aparece nos post. Se for incluido de forma diferente, o html não reconhecerá o nome do autor e o código não vai funcionar, portanto, se você usa algum caracter na sua assinatura, deverá inclui-lo, não esqueça.[/alerta]

No código acima, a biografia do autor irá aparecer apenas nas páginas internas, ficando oculta na home do blog.
Se você quiser que apareça na home também basta apagar a 1ª e a última linha do código (estão destacados em amarelo):

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

</b:if>

Como eu citei no inicio do tutorial, este código pode ser utilizado em blogs que possuem vários autores.
Se o seu blog possuem vários autores, basta copiar e colar o código acima quantas vezes quiser.
Use este código para cada autor no seu blog, colando-o pela quantidade de vezes referentes a quantidade de autores que seu blog possui, mas não esqueça que você deve editar o nome do autor, imagem e texto, para que cada autor tenha sua biografia no final dos artigos que ele publicar.

DICAS:
1) Utilize uma imagem com tamanho máximo de 75px e largura máxima de 75px, para cada avatar do autor.
2) Recomendo que o texto com a biografia do autor não tenha mais que 3 linhas, para que não fique extenso demais.
3) Se quiser coloque um link para a página do blog que fala mais sobre o autor.

Lembrando que usei como referência o código do Template Minima.