Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1498248146
Vida do cache: 1498291346
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Novo Blogger Postagens

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

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]

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

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.

01

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



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

12 Comentários

  1. Anya disse:

    Não deu certo no meu meu. :´(

  2. otimoooo, deu ceetinho :)
    obirgada pelo tutorial otimo e super facil de seguir

  3. Dioane disse:

    Meu blog possui mais de um autor, no caso somos em duas, na hora de incluir o código possui as partes para nome do autor, endereço da imagem e link- autor. Onde consigo esses links? E no meu CSS ele está em branco. O que devo fazer ?

  4. Leonardo disse:

    Gostaria de saber, como faço para trocar? Em vez de perfil do autor, para página do autor?

  5. Aline disse:

    Ha cara, eu nunca consigo mexer com essas coisas, sempre da errado e eu acabo desistindo, como agora por exemplo :(((((

  6. Jesielle disse:

    Oi Vanessa! Gosto muito desse blog! É uma mão na roda pra quem edita os próprios templates. Estou tentando fazer algo que tá bem complicado! Eu quero dar uma formatação diferente para as minhas postagens. Eu estou dividindo minhas postagens em 2 marcadores e queria dar um estilo diferente para as postagens de cada marcador. Exemplo: No marcador1 eu quero por uma imagem(que apareça somente nos posts com marcador1) e no marcador2 quero por uma cor de fonte diferente(que apareça somente nos posts com marcador2). Você saberia me ajudar? Seria bacana um post tutorial com esse tema. Tenho certeza que dá pra fazer, só não descobri como ainda. Se conseguir me ajudar ficarei muito grata! Obrigada!

  7. Franci disse:

    Nunca consigo penso que esta certo mas no fim da erro… POr que é tao complicado mexer no html?

  8. Michelle disse:

    Muito obrigada apliquei tudinho em meu blog, espero que de certo. Abraço.

  9. Oi oi! Eu adorei a dica, mas por algum motivo não consigo fazer estas modificações no meu blog. Não sei o que fiz, mas só o nome do autor fica abaixo do titulo. Mesmo se ali na parte da edição eu colocar ele em outro lugar, ele não vai x_x

    Como faço pra resolver isso? Gostaria de ter ao menos o nome do autor e comentários no topo (que nem aqui no seu blog).

    Agradeço desde já 😀

    =*****

    • Vanessa disse:

      Não sei te dizer como resolver, pois deve ser algo relacionado ao seu template e para tentar descobrir, teria que ser feita uma análise mais minuciosa, e infelizmente eu não disponho de tempo para isso. De qualquer forma, agradeço pelo comentário.

  10. Paulo Santos disse:

    Excelente artigo,isso na verdade dá para o site um aspecto mais profissional é na minha opinião mostra seriedade! Muito obrigado(a) por compatilhar essas valiosas informações!Desejo sucessos pra você e pra todos que acompanham este belo site!

  11. Ótimo artigo! Sei que ajudará bastante muito bloggers que procuram o mesmo.

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.