18 de jul. de 2012

Autor abaixo do título da postagem

Fala aí gente, aqui é o Anon e hoje venho trazer mais um tutorial para vocês. O tutorial de hoje trata-se de como inserir o autor da postagem logo abaixo do título da mesma, enfim, vamos la.

Comece buscando por:
<div class='post-footer-line post-footer-line-1'>

Você deve ter encontrado duas linhas como essa, mas vamos trabalhar só com a primeira. Dentro dessa div, iremos remover o código referente ao autor da postagem e coloca-lo no cabeçalho da postagem. Buscando pela linha que mandei logo acima, vocês provavelmente encontrou um código da seguinte forma:

<div class='post-footer-line post-footer-line-1'><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> <span class='post-timestamp'>

Você deve remover TODA A PARTE EM NEGRITO. Removido esse código, busque por:

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

Novamente encontrou 2 linhas como essa, mas iremos trabalhar só com a primeira. Abaixo dela, iremos inserir o seguinte código:

<div style='color:#XXX;float:left;margin-top:XXpx;margin-left:XXpx;font-family:XXXXX;font-size:XXpx;'>
<data:post.author/>
</div>





Estudando o código
Bem, agora vamos entender esse código, aí vão algumas notas importantes:

color:#XXX; ------------Aqui você define a cor do texto do autor
margin-top:XXpx; -------Aqui você define se o texto sobe(usando números positivos) ou desce(usando números negativos)
margin-left:XXpx; -------Aqui você define a distância do texto com relação ao lado esquerdo
font-family:XXXXX; ----Aqui você define a fonte que irá ser (Arial, Calibri, Impact, etc).
font-size:XXpx; ---------Aqui você define o tamanho da fonte.