Foto e nome do autor do post abaixo do titulo do artigo

Este recurso é bem interessante e serve para blogs que possuem apenas um autor, bem como para blogs que possuem diversos autores.
O procedimento é simples, basta seguir todos os passos deste tutorial.
Primeiro teremos que localizar e apagar um trecho de código e em seguida colocar o “Postado por” abaixo do título do post. Vejamos como proceder, a seguir.

[becape]Vale lembrar que, é sempre recomendável fazer um backup do seu template antes de realizar quaisquer modificações.[/becape]

1º passo – localizar e apagar código:

Acesse o painel do blogger e vá no menu “modelo >> editar html“. No editor HTML do seu template, clique no botão “formatar modelo” e em seguida use as teclas Ctrl+F.
Na caixinha de pesquisa, cole o seguinte código:

<span class='post-author vcard'>
                <b:if cond='data:top.showAuthor'>
                  <b:if cond='data:post.authorProfileUrl'>
                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                      <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
                      <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                        <span itemprop='name'><data:post.author/></span>
                      </a>
                    </span>
                  <b:else/>
                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                      <span itemprop='name'><data:post.author/></span>
                    </span>
                  </b:if>
                </b:if>
              </span>

Se estiver usando template padrão do blogger Designer de modelo, o código deverá estar da mesma forma que está o código acima.



Caso esteja usando template mínima ou modificado, o código poderá estar assim:

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

Agora que você localizou o código, APAGUE todo ele.

Se tiver dificuldade para localizar o código inteiro, tente localizar a 1ª linha:

<span class='post-author vcard'>

Pode ser que no seu modelo de template este código seja repetido 2 vezes, portanto, eu recomendo que você localize o código e substitua o código 2 vezes.

2º passo – colocar o nome do autor do post abaixo do título

Agora procure por:

<div class='post-header-line-1'/>

e cole logo abaixo desta linha, o seguinte código:

<span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn'>
                <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
                  <data:post.author/>
                </a>
              </span>
            <b:else/>
              <span class='fn'><data:post.author/></span>
            </b:if>
        </b:if>
      </span>

3º passo – incluir a foto do autor ao lado do nome:

Agora devemos incluir o código que mostrará a foto e nome do autor do blog.

Procure pela tag:

<span class='post-author vcard'> 

E logo abaixo dela, cole o seguinte código:

<div class='autor-info'>
<b:if cond='data:post.author == &quot;AUTOR&quot;'> 
<span class='author'><a href='LINK-AUTOR'><img src='ENDEREÇO-DA-IMAGEM-ASSINATURA-AUTOR'/></a></span>
</b:if> 
</div>

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 posts. Se for incluído de forma diferente, o blogger não reconhecerá o nome e nem a imagem e o código não vai funcionar, portanto, se você usa algum caractere no seu nome de perfil , deverá inclui-lo, não esqueça!

Feito isso, a foto do autor do post vai aparecer ao lado do “postado por” e abaixo do título da postagem.
Obs.: Cuidado com o tamanho da imagem que você vai usar, o ideal é usar uma imagem com no máximo 40px de altura e 40px de largura.

4º passo – aplicar estilos CSS:

Após incluir o código html, você pode incluir estilos através do CSS.
Procure pela tag ]></b:skin>

E acima dela, cole o seguinte código:

.autor-info {margin:10px 0 10px;}
.author img{
padding: 0; float: left; 
border: none; 
margin: 0 10px 10px 0;
width:40px; /* largura da imagem */
height:40px;  /* altura da imagem */ 
border:1px solid #ccc; /* borda */
}
.post-author {
color:#333;   /* cor da fonte */
font-size: 15px;  /* tamanho da fonte */
font-weight: normal;
}
.post-author a {color:#333;   /* cor do link */}

Blogs com mais de um autor:

Repita todo o procedimento do 1º passo (localizar e apagar código).

Agora procure por:

<div class='post-header-line-1'/>

e cole logo abaixo desta linha, o seguinte código:

<span class='post-author vcard'>
                <b:if cond='data:top.showAuthor'>
                   <data:top.authorLabel/>
                     <b:if cond='data:post.authorProfileUrl'>
                       <span class='fn'>
                <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
                  <data:post.author/>
                </a>
              </span>
               <b:else/>
<span class='fn'><data:post.author/>
</span>
<span itemprop='name'>
<data:post.author/>
</span>
</b:if>
</b:if>
</span>

Vamos repetir o procedimento do 3º passo, só que neste caso, usaremos um código diferente, já que se trata de blogs com mais de 1 autor.
Iremos incluir o código que mostrará a foto e nome de cada autor do blog.

Procure pela tag:

<span class='post-author vcard'>

E logo abaixo dela, cole o seguinte código:

<div class='autor-info'>
<b:if cond='data:post.author == &quot;AUTOR1&quot;'> 
<span class='author'><a href='LINK-AUTOR1'><img src='ENDEREÇO-DA-IMAGEM-ASSINATURA-AUTOR1'/></a></span>
</b:if> 
</div>
<div class='autor-info'>
<b:if cond='data:post.author == &quot;AUTOR2&quot;'> 
<span class='author'><a href='LINK-AUTOR2'><img src='ENDEREÇO-DA-IMAGEM-ASSINATURA-AUTOR2'/></a></span>
</b:if> 
</div>

Se você tiver número maior que 2 autores, você pode repetir o 1º bloco de código, para cada autor que quiser adicionar.
Feito isso, repita todo o procedimento do 4º passo (incluir código CSS).