04/01/2015

10. Maratona CSS: Foto e nome do autor do post abaixo do titulo do artigo

||

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:
<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 u pouco diferente. Então procure por:
<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:
<div class='post-header-line-1'/>

Ele pode aparecer duas vezes, se ocorrer localize o segundo. Encontrando-o abaixo dele cole:
<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:
<span class='post-author vcard'>

e baixo dela cole:
<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:
.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.

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:
<div class='post-header-line-1'/>

e abaixo dela cole:
<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:
<span class='post-author vcard'>

e baixo dela cole:
<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>

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. 

29 comentários:

  1. Very Complited!!
    Mas dá um efeito legal ^^

    Kissus http://imaginandomais.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Hihi sério? Eu até achei bem fácil é apenas três códigos só são um pouco grandes. :3
      Que bom, que gostou do efeito.

      Excluir
  2. Este comentário foi removido pelo autor.

    ResponderExcluir
  3. Ei, o ADV mudou de lugar e link

    http://idealizandolivros.blogspot.com/

    ResponderExcluir
  4. Eu estava procurando um modo de fazer isso à muito, muito tempo! >O< Tanto que nunca dava muito certo ou ficava do jeito que eu queria, hehe. Mas agora que estou criando um blog novo, vai ser um bom jeito de inovar, foi até sorte por eu ter encontrado agora, já que ainda estou criando-o. O tutorial até que é fácil do lado que eu estava pensando que era, viu? c: Só tem bastante código, mas isso não tem importância já que o efeito final fica maravilhoso! <3

    ResponderExcluir
    Respostas
    1. Verdade realmente tem bastante código, mas vale apena sem dizer que é bem fácil de entender. Que bom que pode encontrar aqui no BC *0*

      Excluir
  5. Oi Wendy, estou gostando muito da maratona e estou acompanhando os tutoriais <3
    Bom, eu tentei fazer o outro tutorial mas não deu certo, fiz tudo como explicou, mas não sei porque não apareceu. Eu irei tentar esse para ver se da certo! É realmente um efeito muito bonito os dois, beijos e até mais. ♥

    ResponderExcluir
    Respostas
    1. Obrigada por estar acompanhando e gostando da maratona. *----*
      O do avatar ao lado do titulo da postagem, né? Algumas pessoas estão tendo dificuldades =( estou analisando melhor o codigo. Tomara que esse dê certo. :3 E mais uma vez obrigada por estar acompanhando o BC.

      Excluir
    2. De nada flor, estarei sempre aqui hehe
      Comentarei sempre que eu puder. ^^ Se puder me ajudar com esse tutorial eu agradeceria ♥ Beijos Wendy

      Excluir
    3. Mint você tem face ou email para poder lhe lhe explicar e ajudar melhor?

      Excluir
  6. Eu adorei esse tutorial Wendy ☆ tou usando um layout seu <3

    http://c-otoncandy.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que bom! Jura? Obrigada *----------*

      Excluir
  7. Oi! Obrigado pelo tutorial vai colocá-lo em prática!
    Bem eu venho de um blog de língua espanhola, gostaria de afiliados e segui-lo, você faz o mesmo? Você pode traduzir o meu blog, com o gadget ^^. Obrigado e beijos!

    (Espero que sua resposta ao meu blog-cbox- ou comentário)

    Larita

    todocreadoparati.blogspot.com

    ResponderExcluir
    Respostas
    1. Ebaaa \o/
      Ain que chique? Jura claro que aceito deixarei uma mensagem para vocês.

      Excluir
  8. Eu estava procurando por isso e não achava em lugar nenhum, qnd comecei a perder as esperanças eis q vejo aqui. Eu acho super charmoso algo assim em um blog.
    Curti o tutorial. Ah e feliz 2015! atrasado... he he he.

    http://animesjaychan.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Hihi que bom que pode encontrar aqui, fico feliz em poder ajudar. Obrigada pra você também um feliz 2015 atrasado. :3

      Excluir
  9. Nossa,me ajudou muito esse tutorial,vou usar no meu próximo layout!! :)

    http://srtareditions.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que bom é um prazer poder ajudar, quando estiver pronto me avise viu?

      Excluir
  10. Ótimo tutorial, muito bem explicado! Não conhecia esse tuto, acho que fica muito legal em blogs que tem mais de uma postadora :D

    Twee - http://ameliatwee.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Obrigada. Também acho isso é realmente muito bom.

      Excluir
  11. Wendyyyy eu to bem, e vc? Lembra de mim? hueheueheeu cara, sempre que eu volto aqui, eu me surpreendo. Você é tão divosa *-----*
    Tutorial super explicadinho, como sempre, acho que o efeito fica muito lindo!
    ~kissus, Ash linda || Doce Estante

    ResponderExcluir
    Respostas
    1. Que bom linda! Eu estou bem também. Claro que lembro! Nunca esqueço de um bunnie meu *-* Obrigada pelo elogio. Verdade.

      Excluir
  12. que blog perfeito! ;)
    http://flourishh.blogspot.com.br/

    ResponderExcluir
  13. Fui tentar mas rolou uma treta lá nos HTML, teve uma super luta e infelizmente eu perdi, deixa pra próxima^^

    ResponderExcluir
    Respostas
    1. Poxa eu realmente lamento por isso... espero que consiga na proxima

      Excluir
  14. O tutorial é bem legal *----* <3
    pena q nau funcionou no meu lay ;-;

    ResponderExcluir