Biografia do autor no rodapé da postagem [001]

Ohayoooo meus doces coelhinhos,como estão? E ai?! Vamos ao tutorial do dia? Ele já é velhinho mas como nunca postei.... Nesse tutorial vou ensinar como colocar uma curta biografia de autor no rodapé da postagem, vou mostrar dois modo.

O primeiro modo é mais pratico é apenas aplicar e personalizar, fica abaixo da postagem junto a área. O segundo modo é separado da área da postagem como dos comentários, porem é necessário mexer na área da postagem e comentários. Por esse motivo aconselho adicioná-lo primeiro antes de qualquer alteração nessas áreas (podendo editá-las livremente depois). O segundo moo foi desenvolvido por mim, utilizando os códigos padrões do blog não testei em layouts convertidos. 

Ambos os códigos funcionam no Travel, Simple e outros padrões é só adicionar o Código nos seus respectivos lugares pois em cada layout se encontra em lugares diferentes.

Primeiro modo:

Clique para ver melhor

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:

Códigos

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

Códigos

<div class='post-footer'>

Se tiver dificuldade para encontrar, procure apenas pela parte em vermelho.

Agora que encontrou abaixo dele cole:

Códigos

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

Segundo modo

Clique para ver melhor

Eu arrumei o meu é ficou assim, pois não gosto de bio colada na postagem... então resolvi editar um pouquinho os códigos. E resolvi compartilhar com vocês esse macete, na verdade é mais uma manipulação de áreas do que códigos para dar esse resultado. Mas digo que precisará dar uma mexidinha no seu template caso queira colocar em seu blog, pois é necessário subir e descer algumas áreas para  ficar "ok". Deixei um modelo base para vocês personalizarem como desejarem, mas antes de tudo façam esse tutorial em um blog de testes, por favor... 

1. Vamos separar as postagens em caixas, se você já tiver a área assim não tem necessidade de fazer é só pular para etapa 2. Agora vamos lá! Procure pelos códigos da área de sua postagem, como cada um usa um tipo de modelo procure por alguns desses códigos e veja qual é de sua área:

.post-outer {  ou .main-inner .column-center-outer {  ou .main-outer {

Encontrou? Agora se for personalizado copie todo o código até o final e cole em um bloco, vamos utiliza-lo depois. E apague tudo e no lugar cole:

Códigos

.post-outer { }

Agora procure pelo destacado em laranja:

Códigos

.post {
font-size: 13px;color: #9c9c9c;}

Para quem não saber essa tag é dos textos da postagem, apague os códigos entre as chaves (qual marquei em azul), e no lugar cole:

Códigos

font-size: 13px; ---/* tamanho de fonte */
color: #9c9c9c; ---/*  cor da fonte */
margin: 4px 2px 10px; ---/* espaço interno da postagem */
background:#fff; ---/* cor de fundo */
border: 1px solid #dec0c9;   ---/* borda*/
padding: 20px 10px; ---/* espaço entre postagens */ 

Verifique a pagina inicial e veja a área das postagens estão separadas e se os comentários está separado da caixa de postagem. Se não estive verifique se fez tudo certinho.

2. Procure por #comments { é abaixo dele cole:

Códigos

margin-top: 140px;

Salve! Agora dê uma olhada na caixa de comentários e veja se criou um grande espaço acima dele. Criou? Ótimo! Agora vamos ao próximo passo.

3.Se você usa marcadores no rodapé do blog, será necessário oculta-lo. Não se preocupe vai aparecer na pagina inicial, só vai ficar oculto ao abrir as postagens. Procure por  ]]></b:skin> e abaixo dele cole:

Códigos

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>.post-footer-line-1{display:none}</style>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>.post-footer-line-2{display:none}</style>
</b:if>

Se o seu marcador for abaixo do titulo, não tem necessidade de fazer.

4. Agora procure por  ]]></b:skin> e acima dele cole:

Códigos

.bio-autor{
width: 727px;
margin:37px 2px -150px -10px; ---/* espaço de dentro da bio */padding:5px 0 15px;
background: #FFFFFF; ---/* cor do fundo da autor */
}
.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. Agora salve e vamos para a segunda parte do código. Ainda dentro do HTML procure por:

Códigos

<div class='post-footer'>

Se tiver dificuldade para encontrar, procure apenas pela parte em vermelho.

Agora que encontrou abaixo dele cole:

Códigos

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

Agora é só salvar! Pessoal o modelo da postagem não está como a imagem da segunda ilustração, porque deixei como base para arrumarem de acordo com o gosto de vocês. Personalizado atrapalha a arrumar...

Observação 1: Nas áreas que está escrito nome do autor, deve ser  perfeitamente como o nome do autor é escrito no seu perfil, ou seja se tiver algum caractere especial , também deve coloca-los com o nome. Lembrando que a biografia só vai aparecer se estiver com o nome exatamente como o do perfil. Como também só vai aparecer nas páginas internas.

Observação 2: Para blogs que tenham mais de um autor/ postador,  deve incluir esse código mais de uma vez a partir do segundo código. Ele deve se repetir de acordo com a quantidade de postadores. Ex: Se seu blog tem 4 autores/postadores, deve inserir o código 4 vezes a partir do segundo código.

Observação 3: Utilize uma imagem com tamanho de no maxino 75x75 de tamanho, para cada avatar, se ultrapassar o tamanho vai aumentar assim deformando a bio. Não ultrapasse mais de 3 linhas falando sobre você, caso seja necessário, crie uma página estática falando um pouco mais de você e deixe o link no final da biografia. 

Observação 4: Fique claro que não dou 100% se certeza que o código vai funcionar em seu template, fiz teste em alguns modelos e funcionou em alguns como e em outros não. Então talvez seja o modelo ou algum código que dê conflito.