Avatar e nome do autor do post abaixo do titulo da postagem

Yo belezocas? Como vão indo? Eu vou bem graças a Deus. Hoje trago um tutorial que achei bem legal! Não é muito diferente de um que trouxe a algum tempo aqui no blog, de como colocar avatar ao lado do titulo ou da coluna das postagens, esse é exatamente a mesma coisa mais dentro da área das postagens. Ele não é tão editável em relação a posição quanto o outro.  Eu acho que esse apetrecho é ótimo para blog/site que possuiu um único postador, bem como para os que possui diversos autores. É ótimo para blogs/sites que querem mostrar de frente  seus autores de uma forma simples e profissional. O tutorial é bem simples é fácil de ser aplicado, basta seguir o tutorial passo a passo e conferir o resultado final. Como digo antes de executar esse tutorial execute-o em um blog de teste ou faça um backup do seu template/layout por segurança.

Podem ver o resultado nessa pequena imagem abaixo. Lembrando sua posição não é muito editável, então sempre ficara um espaço abaixo do avatar, mas pode diminui-lo usando "margin" ou tentar disfarçar de outra de outra forma.

1. Já dentro do blog que deseja adicionar o recurso, acesse o HTML do blog através da pagina "Modelo" e "Editar HTML". Com os códigos já abertos ative o atalho de pesquisa usando o CTRL+F  de seu teclado, dentro da caixinha pesquise por:

Códigos

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

Caso você use um template modificado ou modelo Minima, o código pode estar um pouco diferente. Então procure por:

Códigos

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

Para facilitar a pesquisa procure apenas pelo trecho marcado em vermelho.

Localizando todo o código apague ele e salve! Pode ocorrer de em alguns templates/layouts tenha o código repetido em dois lugares. Apague os dois ou apenas o segundo código encontrado.


2. Agora vamos colocar o nome do autor abaixo do titulo das postagens. Para isso procure por:

Códigos

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

Ele pode aparecer duas vezes, se ocorrer localize o segundo. Encontrando-o abaixo dele cole:

Códigos

<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. Agora iremos adicionar a foto e nome a baixo dos títulos, para isso procure pelo trecho abaixo:

Códigos

<span class='post-author vcard'>

e baixo dela cole:

Códigos

<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'/></a></span>
</b:if>
</div>

◤Entendendo o código◥

• Rosa: URL/endereço/ link da imagem que vai aparecer, aconselhável uma imagem de 50x50. Para não ficar pesado.

• Verde: endereço da biografia do autor, você pode criar uma pagina que fale mais sobre o autor e colocar o link.

• Laranja: ID do autor, esse trechinho é muito importante pois é ele que vai identificar o autor para a imagem e nome aparecer. Ele deve ficar exatamente como é no seu perfil do blogger ou do Google+ dependendo de qual você use, se não for exatamente igual não ira parecer pois não vai reconhecer o ID. Se seu nome tiver algum ícone ou caractere especial deverá inclui-lo também.

4. Para finalizar vamos adicionar os estilos. Para isso procure por ]]></b:skin> , e acima dela cole:

Códigos

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

Salve e veja o resultado! Então gostou? Agora basta personalizar como deseja.

Para Blogs com mais de um autor:

Agora alguns devem estar se perguntando "como colocar mais de um autor Wendy?" é super fácil! Para fazer esse procedimento é necessário recomeça o tutorial.


1. Procure por:

Códigos

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

e abaixo dela cole:

Códigos

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

2. O passo três é a mesma coisa do tutorial acima mas com uma pequena diferença pois desta vez não é um autor mas sim mais de um autor. Iremos incluir o código que adiciona o avatar , nome e o ID dos autores. Para isso procure por:

Códigos

<span class='post-author vcard'>

e baixo dela cole:

Códigos

<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-IMAGEM1'/></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-IMAGEM2'/></a></span>
</b:if>
</div>

◤Entendendo o código◥

• Rosa: URL/endereço/ link da imagem que vai aparecer, aconselhável uma imagem de 50x50. Para não ficar pesado.

• Verde: endereço da biografia do autor, você pode criar uma pagina que fale mais sobre o autor e colocar o link.

• Laranja: ID do autor, esse trechinho é muito importante pois é ele que vai identificar o autor para a imagem e nome aparecer. Ele deve ficar exatamente como é no seu perfil do blogger ou do Google+ dependendo de qual você use, se não for exatamente igual não ira parecer pois não vai reconhecer o ID. Se seu nome tiver algum ícone ou caractere especial deverá inclui-lo também.

 Se você tiver um número maior de postadores , basta repetir o primeiro código destacado com o fundo cinza. Basta adicionar um código desse para cada postador e colocar o nome para identificar o postador.  Feito isso faça a quarta parte do tutorial acima que é o CSS a parte da personalização do código. Créditos ao Show de HTML.