Como colocar o nome do autor do artigo abaixo do titulo

Como colocar o nome do autor do artigo abaixo do titulo

Praticamente todos os templates do blogger ao se criar uma nova postagem, o nome do autor do artigo aparecerá no rodapé. É como se fosse uma assinatura do autor de propriedade do artigo, para uma questão de melhorar o visual pode-se colocar esta assinatura abaixo do título do artigo modificando pouca coisa do codigo-fonte de seu blog.

Créditos no artigo e imagens: Mundo Blogger


1º - Modificação do html.


Primeiramente entre em seu blog e vá em DESIGN -> EDITAR HTML -> Marque a caixa "Expandir modelos de widgets" e procure pelo trecho de código abaixo:
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
Obs.: Caso não possua em seu template é menos trabalho pra voce pule para a próxima parte.E utilize o codigo acima para este tutorial.

Ao encontrar o código você deverá copiá-lo e salva-lo a parte em um bloco de notas, depois de salvo em seu PC apague-o do codigo-fonte.

Após isto procure pelo trecho abaixo:
<div class='post-header-line-1'/>
Após encontrar este trecho cole logo ABAIXO desta linha o código salvo por voce no bloco de notas, visualize e depois salve as modificações, devendo ficar assim:


<div class='post-header-line-1'/>
<span class='post-author vcard'>
      <b:if cond='data:top.showAuthor'>
        <data:top.authorLabel/>
        <span class='fn'><data:post.author/></span>
      </b:if>
    </span>

2º Aplicando estilos com CSS.

Após inserir o html, o seu nome de autor abaixo do titulo do artigo já estará pronto, mas ainda sem nenhum efeito ou configuração.
Vamos agora definir as cores, fontes, etc. Para dar um visual personalizado ao seu template.
Vá novamente em DESIGN -> EDITAR HTML e procure pela tag:

]]></b:skin>
 
Ao encontrar cole o trecho abaixo logo ACIMA dela. 

.post-author {
color:#XXXXXX;   /* cor da fonte */
font-size: XX px;  /* tamanho da fonte */
font-weight: normal;
}

Esta configuração acima é somente para o nome do autor, caso queir aplicar propriedades ha linha Se preferir você também pode adicionar estilos para que sejam aplicados a toda linha abaixo do titulo do post, para isso acrescente o seguinte trecho:
.post-header-line-1{
color: #XXXXXX; /*coloque a cor de sua preferência*/
margin: 0;  /*defina um espaçamento se quiser*/
padding: 0;  /*defina um espaçamento se quiser*/
font-size: X px; /*coloque o tamanho da fonte de sua preferência*/
}
Em caso de dúvida ente em contato.