Adicionando biografia do autor abaixo das postagens do blog

Olá queridos leitores, hoje veremos como colocar uma pequena biografia do autor no final de cada postagem do seu blog automaticamente. Neste gadget, possui a imagem do autor, o nome do autor e a descrição. Mas é claro que você pode adicionar mais coisas ao gadget e personalizá-lo ao seu gosto. Então, vamos ao tutorial!

1. Acesse a guia Modelo, clique no botão Fazer backup/Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Depois, clique no botão Editar HTML e marque a opção Expandir modelos de widgets.

3. Pressione Ctrl+F para abrir o Localizador do navegador, e procure pelo código abaixo.

]]></b:skin>

4. Imediatamente acima deste código, cole o seguinte código.

.bio-autor{
margin:10px 2px 20px 2px;
padding:5px 0 15px;
border-top: 1px solid #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;
}

5. Clique em Visualizar e se estiver tudo correto, clique em Salvar modelo.

6. Ainda na opção Editar HTML e com a caixa expandir modelos de widgets, pressione novamente Ctrl+F para abrir o Localizador e procure elo código abaixo.

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

Atenção: o código acima faz referência à parte abaixo das postagens e é uma sugestão de onde colocar o gadget. Caso você queria outro lugar, deverá ter conhecimentos em HTML.

7. Após ter encontrado o código onde deseja colocar o gadget ou o código acima, cole o seguinte código abaixo do mesmo.

<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>

Substitua as partes destacadas de vermelho pelo nome do autor do blog (no caso, o seu). Substitua a parte destacada de azul pelo endereço da imagem do autor. Substitua a parte destacada de laranja pela descrição do autor e por fim, substitua a parte de rosa por um link com mais informações sobre o autor (caso não queria o link, basta apagar toda a parte destacada de negrito).

8. Por fim, clique em Visualizar e se estiver tudo correto, clique em Salvar modelo.

Tudo pronto! Agora, os seus leitores poderão saber mais um pouco sobre você e facilita muito. Caso queira ver como irá ficar, basta olhar o final desta postagem de testes. Abraços e até mais.

Referências:

• Mundo Blogger, Vanessa: Artigo completo. Veja o original.