Biografia do Autor no Rodapé da Postagem

Falarei aqui no DicasHot algo bem interessante, por que algumas pessoas querem saber a pessoa por trás do site; e agora chegou está oportunidade de saber um pouco a respeito do autor do site. Para colocar a biografia do autor no seu blog é preciso um pequeno código.

                                                                Seguir @DicashotOficial

1º passo – Aplicar estilos CSS:

Vá na aba “design”, entre na edição HTML do seu template, não precisa clicar em “expandir modelos de widgets” e procure pela tag ]]></b:skin>
e cole o seguinte código logo ACIMA dela: 

.bio-autor{
margin:10px 2px 20px 2px;
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;
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;
}

2º passo – Incluir o código HTML:

Volte na aba “design", entre na edição HTML do seu template, clique em “expandir modelos de widgets” e procure pela tag <div class='post-footer'>

E cole logo ABAIXO dela o seguinte código: (faça as aslterações destacadas).

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

Gostou deste post?

Se inscreva e receba nossas atualizações por e-mail: