Mostrando postagens com marcador Quote. Mostrar todas as postagens
Mostrando postagens com marcador Quote. Mostrar todas as postagens

Como colocar Biografia do Autor no final do post

     Bom pessoal, tenho uma Notícia Boa e outra Ruim, qual quer saber primeiro? Boa ou Ruim? Vamos pra boa primeiro, a boa é que estarei mostrando aqui pra você o primeiro tutorial do Portfólio Extras, e a Ruim é que como eu tinha dito, caso não houvesse muitos comentários no Post anterior, não irei fazer Layout Gratuitos, mais calma, se um dia eu tiver um tempinho e posto um Template espetacular para vocês. 
i 
    Então vamos deixar de Bla Bla Bla e vamos ao tutorial. Hoje irei mostrar para você coloca Biografia do Autor no final do post.
OBS.: Antes de começar faça um Backup do seu Template
    1. Faça login no Blogger, clique em Designer >> Editar HTML.
    2. Procure pela a 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;
}

Em seguida Visualize, se estiver tudo certo, SALVE! 
    3. 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'>
    4. Cole logo ABAIXO dela: 

<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>
Edite os campos destacados de VERMELHO. 
               
 ATENÇÃO.:
     No código acima, no campo para incluir o nome do autor, deve ser escrito de forma exata. Deve estar exatamente igual a que aparece nos post. Se for incluido de forma diferente, o html não reconhecerá o nome do autor e o código não vai funcionar, portanto, se você usa algum caracter na sua assinatura, deverá inclui-lo, não esqueça.
      Se o seu blog possuem vários autores, basta copiar e colar o código acima quantas vezes quiser.
     Use este código para cada autor no seu blog, colando-o pela quantidade de vezes referentes a quantidade de autores que seu blog possui, mas não esqueça que você deve editar o nome do autor, imagem e texto, para que cada autor tenha sua biografia no final dos artigos que ele publicar. 

CRÉDITOS: MUNDO BLOGGER
5 Comentários