Biografia do autor no rodapé da postagem [Imagem + Texto]

Oi pessoal a quanto tempo não posto aqui no Design Mania, mais para não ficar desatualizado tentarei, tentarei postar pelo menos uma vez por semana. Para o tutorial de hoje trouce um código bem simples mais muito útil desenvolvido pelo Bunny Crazy. Trata-se de uma pequena descrição do autor do blog com uma foto confira:

Código testado apenas no Modelo Travel (Viagem);

Faça antes um Backup de seu layout, caso aja erro pode ser recuperado facilmente;

1. Vá até a Pagina Modelo e clique em Editar HTML, ao abrir os códigos de seu blog procure por ]]></b:skin> e acima dele cole:

.bio-autor{
margin:10px 2px 20px 2px; ---/* espaço de dentro da bio */
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;
marg in: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;
}

2. Agora salve e vamos para a segunda parte do código. Ainda dentro do HTML procure por:

<div class='post-footer'>

Se tiver dificuldade para encontrar, procure apenas pela parte em vermelho. Agora que encontrou abaixo dele cole:

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

Dentro de um corpo de template/layout existe dois ou mais códigos desse. Geralmente é no segundo que se cola, mas pode ocorrer de não funcionar no segundo então faça um teste rápido colando nos outros. As partes destacadas em azul são os trechos que vai arrumar.

Bom como disse acima os créditos vão para o site Bunny Crazy! Agora e só Salvar e personalizar!