Como colocar descrição dos autores no final dos posts do Blogger

Alguns leitores me perguntaram como colocar uma descrição do autor do blog no final de cada postagem, da mesma maneira que fiz no mais recente template do Dicas Blogger. Vou tentar explicar, mas já adianto que o procedimento não é muito simples, sendo necessário ter conhecimentos em CSS.

Na imagem abaixo, vemos a minha descrição em um post recente:

Descrição do autor

Vou ensinar um modelo um pouco diferente do que estamos usando aqui. Vamos lá?

Etapa 1:
Entre no HTML do template, clique em "expandir modelos de widgets" e cole o código abaixo ANTES  da tag  ]]></b:skin>

**Para encontrar a tag, dê um Crtl+F com seu teclado e cole ]]></b:skin>

**Para entrar no HTML, veja este post - Como editar HTML na nova interface

/* Autores
----------------------------------------------- */

#post-footer-autor {
width: 100%;
height: 77px;
background: #e6e6e6; /*Cor do plano de fundo*/
border: #ccc; /*Cor da borda*/
margin: 8px 0px 8px 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
border: 2px solid #ccc; /*Espessura da borda*/
}

#autor-img {
width: 64px; /*largura da imagem*/
height: 64px; /*altura da imagem*/
background: #fff; /*plano de fundo da imagem*/
float: left;
margin: 7px;

}
#autor-sobre {
padding-right: 5px;
margin: 0px;
}

#autor-sobre p{
font-size: 14px;
padding: 10px;
margin: 0;
text-align: justify;
text-transform: normal;
color: #333; /*Cor do texto*/
}
#autor-sobre a{
color: #3d85c6; /*Cor dos links*/
text-decoration:none;
}
#autor-sobre a:hover {
color: #9A9A9A; /*Cor dos links ao passar o mouse*/
text-decoration:underline;
}

Se você tiver conhecimentos em CSS, é possível mudar as cores de plano de fundo, bordas, links e texto, conforme assinalei em vermelho.

Etapa 2:

Depois, procure por  <div class='post-footer'> e cole ANTES dessa tag o seguinte código:

<!-- Resumo dos autores-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;Nome do autor&quot;'>
<div id='post-footer-autor'>
<div id='autor-img'>

<img src='URL DA IMAGEM' style='border: 0px solid #fab805; padding: 0; margin: 0;'/>
</div>
<div id='autor-sobre'>
<p>
<b>Sobre o autor:</b>
Faça uma breve descrição. <a href='link'> Nome do link</a></p>
</div>
</div>
</b:if>
</b:if> <!--Resumo dos autores Final-->

Antes de salvar, faça as seguintes alterações:

• Em  Nome do autor, escreva o nome do autor que receberá a descrição exatamente como está nas postagens.
• Em URL da imagem, coloque a url da foto do autor no tamanho 64 x 64.
• Em Faça uma breve descrição, escreva algo sobre o autor.
• Em link, coloque uma URL (pode ser de um outro blog, Twitter, Facebook e etc) e em Nome do Link escreva o nome da página que está sendo linkada.

Atenção! Se o seu blog tiver mais de 1 autor,  repita a etapa 2 para cada um deles.

Se você não sabe como obter a URL da imagem, leia este post: Como hospedar imagens no Picasa

Clique em "visualizar" e se tudo estiver ok, clique em "salvar modelo"

Vejam o resultado desse código no blog da Priscila:

Blog Priscila Fago

Como eu disse anteriormente, trata-se de um hack complexo então é preciso bastante atenção.