• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn

Incluir uma foto e o nome do autor do post abaixo do titulo.
Eu já mostrei como colocar o nome do autor do Post Abaixo do Titulo, assim como mostrei como incluir uma Biografia do autor do post no rodapé do artigo. Hoje veremos como incluir uma foto ao lado do nome do autor do post, logo abaixo do título da postagem no blogger.
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).

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn