Autor,Marcadores,Data e comentários abaixo do titulo da post.

Oie é a Jú...

A dica de hoje é de como colocar  os elementos que,por padrão ficam no fim da postagem,como comentários,as tags,autor e até mesmo a data,laaaaá no começo ,mas embaixo do título.
Um bom exemplo de como ficará seu resultado é observando as informaçõe deste blog,elas foram todas colocadas abaixo do título da postagem.
Da um estilo todo diferente,sem falar que fica mais organizado.


O procedimento é um pouco complicado,então faça-o com cuidado e atenção e lembre-se:

*Sempre faça backup de seu template,antes realizar quaisquer procedimentos que envolva alterações no código fonte HTML do seu modelo.

Vamos la?

Primeiro passo-Copiando e retirando os códigos.

Asceda ao seu código Html,vá em Modelo>Editar HTML>marque a opção 'expandir modelos de widgets'
Após isso de um Ctrl+F e procure pelo trecho 'post-footer'.
Voçe irá recortar (copiar o trecho e apaga-lo)os trechos deste código que correspondem ás tags,autor,comentários e data,para depois cola-los em um bloco de notas.Isso é importante para que eventualmente nao os perca no processo de copia/recorte.
Este trecho do tutorial é um pouco relativo ao que voçe quer,podendo optar por alterar todos ou apenas aqueles que deseja que esteja abaixo do título do post.
Por exemplo:

1-Para autoria do post.
Se eu quero apenas que apenas o autor do post fique la em cima, vou copiar ,colar no bloco de notas e depois apagar do html o seguinte trecho:

<span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <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>

Obs*Por padrão é assim que estaria,mas há uma pequena variação em alguns modelos,portanto se nao achar pelo trecho no seu html exatamente deste jeito,procure por algo parecido a ele,que geralmente se encontra abaixo do <div class='post-footer-line post-footer-line-1'> 

2-Para os Comentários.
Se eu quiser apenas que a quantidade de comentários do post fique abaixo do título, vou copiar ,colar no bloco de notas e depois apagar do html o seguinte trecho:

 <span class='post-comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <b:if cond='data:post.allowComments'>
              <b:include data='post' name='comment_count_picker'/>
            </b:if>
          </b:if>
        </b:if>
</span>

3-Para os Marcadores.
Se eu quiser apenas que a quantidade os marcadores daquela postagem,fique abaixo do título, vou copiar ,colar no bloco de notas e depois apagar do html o seguinte trecho:

<span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span>

Obs*Por padrão é assim que estaria,mas há uma pequena variação em alguns modelos,portanto se nao achar pelo trecho no seu html exatamente deste jeito,procure por algo parecido a ele,que geralmente se encontra abaixo do <div class='post-footer-line post-footer-line-2'>


4-Para a data do post.
Se eu quiser apenas que a data  daquele post,fique abaixo do título, vou copiar ,colar no bloco de notas e depois apagar do html o seguinte trecho:

<b:if cond='data:post.dateHeader'>
      <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
    </b:if>

 Obs*Por padrão é assim que estaria,mas há uma pequena variação em alguns modelos,portanto se nao achar pelo trecho no seu html exatamente deste jeito,procure por algo parecido a ele,que geralmente se encontra abaixo da <div class='date-outer'>.

 Devemos ficar atentos ao fato de que por padrão,ja existem estilos css aplicados á data,isso irá resultar,na hora de colocar os elementos lado-a-lado,abaixo do título da postagem,uma diferença quanto aos demais,como quebra de linha,letras diferentes,fundo etc.
Para que isso nao aconteça voçe deverá RETIRAR do código da data,demonstrado acima, os seguinte trecho <h2 class='date-header'> e o final </h2>
 Portanto ficará assim:

<b:if cond='data:post.dateHeader'>
      <span><data:post.dateHeader/></span>
    </b:if>

 Certifique-se que fazer essas devidas modificaçoes Antes de partirmos para a proximo passo.

Lembre-se:o procedimento é copiar o código do elemento á escolha,cola-lo no bloco de notas,apagar este trecho do html e seguir para a proxima etapa.Se voçe esquecer de Apagar algum trecho ,este elemento se repetirá,ficando tanto abaixo do título quanto no fim da postagem,assim como se voçe eventualmente cipiar um trecho e nao cola-lo no bloco de notas e acabar perdendo ele,terá que fechar o editpr e refazer tooodo o processo novamente,e nao é isso que nós queremos nao é?Então faça tudo certinho.

Segundo passo:inserindo-os após o título do post.

Com Ctrl+F novamente,procure agora por <div class='post-header-line-1'/>,ela pode estar ou nao com a barra de fechamento /.
Cole exatamente abaixo dela,na ordem que voçe preferir que os elementos estejam dispostos,os códigos que voçe copiou e colou no bloco de notas anteriormente.

Obs*Quando digo 'na ordem que voçe preferir que os elementos estejam dispostos'me refiro á disposição dos coigos,que resultara na disposição dos elementos.por exemplo:
Se quero que fique aasim:
Postado por Alguem  Em: 12 março 2013  Nenhum comentário:
Terei que colocar os codigos também nessa ordem,so que claro,um abaixo do outro. 

Voçe pode adicionar ainda abaixo de cada início de trecho de código um íconeou separador ,pra ficar bem legal,tem vários espalhado pela web,basta procurar.
Basta apenas voçe inserir <img src='url da imagem aqui' style='margin-bottom:-5px;'/> abaixo de <span class='post-author vcard'> ou b:if cond='data:post.dateHeader'> ou
<span class='post-comment-link'> ou <span class='post-labels'>.
No fim das contas seu código deve ficar deste jeito,ou muito parecido com isso:
 

<div class='post-header'>
    <div class='post-header-line-1'/>
<span class='post-author vcard'> <img src='url do ícone aqui' style='margin-bottom:-5px;'/>
<b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <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> 
<b:if cond='data:post.dateHeader'>  <img src='url do ícone aqui' style='margin-bottom:-5px;'/>
          <span><span style='color:red;'><data:post.dateHeader/></span></span> |
        </b:if>
<span class='post-labels'>
<img src='url do ícone aqui' style='margin-bottom:-5px;'/>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span> 
<span class='post-comment-link'>  <img src='url do ícone aqui' style='margin-bottom:-5px;'/>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <b:if cond='data:post.allowComments'>
              <b:include data='post' name='comment_count_picker'/>
            </b:if>
          </b:if>
        </b:if>
      </span>
    </div>

Em azul esta o código que ja havia no seu modelo antes de fazer as modificaçoes,em Vermelho está o codigo do autor do post,em laranja esta a data,em rosa esta o marcador ,em verde escuro esta os comentários e em verde limão o trecho que corresponde aos ícones que ficram á frente de cada elemento.

Apos isso,clique em visualizar e se nao tiver erro salve o Modelo.  

Se eventualmente quiser reverter,apenas faça upload do template de backup aconselhado no início.
Espero que a dica tenha sido útil,sei que o post ficou meio extenso,mas é que tentei fazer explicar o mais detalhado possivel.
Até a proxima.