Descrição do autor no fim das postagens

Fiz um “campo” especial para colocar no fim das postagens, onde aparecerá uma foto e um pequeno texto descritivo do autor que escreveu cada texto do blog. Estilo esse que está no Códigos Blog.

Esse código foi desenvolvido para ser usado em blogs com mais de um autor, de forma que a descrição do autor vai ser mostrada de acordo com quem escreveu a postagem, tudo isso de forma automática sem necessidade de modificar nada dentro das postagens.

1° - Faça login no Blogger, entre em “Layout” -> “Editar HTML”. Marque a caixa “Expandir modelos de widgets”.

2° - Procure (Ctrl + f) por:

]]></b:skin>

3° - Cole o seguinte código ANTES do código encontrado:

#post-footer-autor {
width: 100%;
height: 67px; /*Altura do campo autor do post */
background: #071a3a; /* Cor de fundo */
margin: 8px 0px 8px 0px; /* Distancia das margens do campo do autor */
font-family: Geneva, Arial, Helvetica, sans-serif; /* Estilo de Fonte */
}
#autor-img { /* Estilo Avatar */
width: 54px; /* Largura do espaço para avatar */
height: 54px; /* Altura do espaço para avatar */
background: #fff; /* Cor de fundo do avatar */
float: left;
margin: 7px; /* Distancia das margens do avatar */
}
#autor-sobre {
padding-right: 5px;
margin: 0px;
}
#autor-sobre p{ /* Estilo texto da descricao */
font-size: 12px; /* Tamanho da fonte */
padding: 10px; /* Distancias do texto em volta do campo */
margin: 0;
text-align: justify;
text-transform: normal;
color: #fff;
}
#autor-sobre a{ /* Estilo texto linkado */
color: #9A9A9A; /* Cor link utilizado dentro do campo */
text-decoration:none; /* Sem algum efeito de destaque no link */
}
#autor-sobre a:hover { /* Estilo texto linkado ao passar mouse */
color: #9A9A9A; /* Cor link ao passar mouse */
text-decoration:underline; /* Sublinhado no texto ao passar mouse */
}

O código CSS acima são as características da caixa do autor. Está toda comentada entre */ ... /*
Para fazer alguma modificação basta saber o básico do básico de CSS, como mudar cores e tamanhos.
Basta mudar atentamente os estilos e personalizar ainda mais o “widget”.

4° - Procure (Ctrl + f) por:

<div class='post-footer'> ou <div id='post-footer'>

5° - Cole o seguinte código ANTES do código encontrado:

<b:if cond='data:post.author == &quot;NOME DO ESCRITOR&quot;'>
<div id='post-footer-autor'>
<div id='autor-img'>
<img src='LINK_DA_IMAGEM' style="border: 2px solid #ccc; padding: 0; margin: 0;"/>
</div>
<div id='autor-sobre'>
<p>

DESCRIÇÃO AUTOR AQUI

</p>
</div>
</div>
</b:if>

O código acima faz referencia a 1 escritor! Para colocar vários escritores, basta copiar e colocar o código várias vezes e fazer as seguintes alterações:

• NOME DO ESCRITOR -> Coloque exatamente o nome do escritor, igual o nome de usuário usado na conta para postar. O nome deve estar igualzinho ou o código não vai funcionar adequadamente. Exemplo: Na minha conta utilizo o nome: Paulo Estevão. Então devo colocar: Paulo Estevão. Se fosse Admin, deveria colocar Admin, se fosse AdmIniStradoRR deveria colocar AdmIniStradoRR.
• LINK_DA_IMAGEM -> Coloque o link da imagem do avatar. Lembrando que o link deve ter um caminho direto para a imagem com um tamanho de 50px por 50px. Obs.: Não se esqueça do http://
• DESCRIÇÃO DO AUTOR AQUI -> Coloque o texto de descrição do autor nesse local. Faça testes de forma que não passe do limite dos campos do widget. Obs.: Use links e o que quiser dentro da descrição.

6° - Relembrando: Se seu blog tiver mais de um escritor, basta colar o código acima quantas vezes for necessário e editá-los de forma que cada escritor tenha o seu código.

7° - Teste salve e teste novamente.

Para editar melhor o campo do autor, leia os seguintes textos:

• Tabela de Cores HTML
• Estilizando texto
• Mais estilização de texto