Sobre o Autor no Final das Postagens ( Versão 1)

Olá pessoal, hoje iremos aprender a como colocar uma breve biografia no final das postagens aqui no Blogger. Esta será a 1ª versão que ensinarei a vocês, mas ao longo do tempo, irei apresentar a vocês mais Versões de Biografia dos autores, com mais personalizações.

Uma das vantagens do Wordpress, que oferecem para as pessoas que utilizam essa plataforma, é que se pode adicionar abaixo de cada post uma pequena biografia do autor. E muitos blogueiros que utilizam a plataforma do Blogger, gostariam de saber como podem adicionar este recurso ao seu blog.

O estilo abaixo, é o que está no utilizando Blogger. Mas pretendo mudar em breve.

 

Vamos ao tutorial:

1º - Acesse o Painel de Controle, e vá em "Design". (Modelo).

2º - Em seguida clique em "Editar HTML" e marque a opção "Expandir Modelos Widgets".
3º - Agora pressione as teclar CTRL+F e procure pela seguinte tag:

]]></b:skin>

4º - ACIMA da tag encontrada cole o seguinte código:

#post-footer-autor {
width: 100%;
height: 67px; /*Altura do campo autor do post */
background: #1E90FF ; /* 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 */
}

Obs: O texto destacado em negrito e que esta entre /*...*/ podem ser alterados. Para fazer as alterações, basta você souber o básico do CSS, de como mudar as cores e os tamanhos.

• Tabela de Cores

5º - Agora vamos procurar pela seguinte tag:

<div class='post-footer'>

6º - E ACIMA da tag encontrada anteriormente, cole o seguinte código:

 <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_DO_AUTOR' style="border: 2px solid #ccc; padding: 0; margin: 0;"/>
</div>
<div id='autor-sobre'>
<p>
 DESCRIÇÃO DO PERFIL DO AUTOR
</p>
</div>
</div>
</b:if>
 </b:if>

• NOME DO AUTOR:  Coloque exatamente o nome igual a do Perfil do Blogger. O nome deve ficar igual, se não o código não irá funcionar adequadamente. Ex: Na minha conta é usado Bruna T. Marques. Então devo colocar igual no código, como: Bruna T. Marques. Se fosse FuLaNNO, teria que colocar FuLaNNO no código.
• URL_DA_IMAGEM_DO_AUTOR: Nesse "campo", você deverá colocar o link da imagem. Para isso vá na sua imagem, clique no botão direito em cima da imagem e clique em "Copiar endereço da imagem" ou algo semelhante assim. (Depende do seu navegador). O tamanho da imagem deverá conter os seguinte tamanhos 50px por 50px. (Não se esqueça de colocar o http:// no link da imagem).
•  DESCRIÇÃO DO PERFIL DO AUTOR: Digite uma pequena biografia sua, no máximo com 3 linhas, não passe disso, se não irá passar do campo da descrição do autor. 

Obs: A parte que esta destacado em azul, se refere para deixar a biografia somente nas páginas internas e com isso, não aparecerá na página inicial do seu blog.

7º - Depois clique em "Salvar Modelo".

Estilo por Paulo Estevão com pequenas modificações por Utilizando Blogger