Biografia do Autor do post no rodapé

Depois que eu lancei o novo layout do Universo Sombrio, alguns leitores me enviarem como “sugestões de artigos” um pedido para que eu ensinasse a colocar uma pequena Biografia do autor do post no rodapé.
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.

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.

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.

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Comentários
  1. Dri
    • Vanessa
  2. Leonardo
  3. Arlane Gonçalves
  4. Jeise
  5. edivaldo santos
    • Vanessa
  6. Edson
  7. Janilton
  8. Janilton
  9. Andson Boa Sorte
  10. Marina Almeida
  11. Kaoru-dono
  12. WMaster
  13. Sandro3a
  14. Sacerdote I.R.Ci
  15. Sacerdote I.R.Ci
  16. Giovanni
  17. .:: Clau ::.
  18. Jack Moore
  19. .:: Clau ::.
  20. Victória Andressa
  21. .:: Clau ::.
  22. Diego Monutti de Souza
  23. CHEZ CAROL BAR LOUNGE
  24. .:: Clau ::.
  25. catablogandosaberes
  26. ::Clau::
  27. alberodoro
  28. ::Clau::
  29. Janaina Barreto
  30. Janaina Barreto
  31. Bruno Sajermann
  32. James Rocha
  33. ::Clau::
  34. karatuca
  35. ::Clau::
  36. Mary
  37. ::Clau::
  38. Mary