Autor, Marcadores e Comentários abaixo do Título

 Yoo ~ ²

O tuto de hoje é bem complicadinho, se não prestar atenção você vai errar . Enfim, vou ensinar a deixar os marcadores, o autor da postagem e os comentários abaixo do título da postagem, como está aqui no Kawaii.

Primeiro o básico e depois eu explico como deixar assim enfeitadinho, separado por || e com essa bordinha pontilhada.

Let's Go !

Vá em Design > Editar HTML e marque a caixinha de Expandir Modelos de Widget.

Você vai precisar do bloco de notas, acredite.

1. Procure por:

<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' rel='author' title='author profile'>

                  <data:post.author/>

                </a>

              </span>

            <b:else/>

              <span class='fn'><data:post.author/></span>

            </b:if>

        </b:if>

      </span>

 O código acima representa o nome do autor. Recorte ele e cole no bloco de notas, usaremos daqui a pouco.

2. Agora procure por:

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

 O código acima representa os marcadores. Recorte ele e cole no bloco de notas, usaremos daqui a pouco.

3. E por último, procure por:

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

                      <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>

                    </b:if>

                  </b:if>

                </b:if>

              </span>

 O código acima representa os comentários. Recorte ele e cole no bloco de notas, usaremos daqui a pouco.

Agora já conseguimos todos os códigos necessários, certifique-se que você RECORTOU e não somente COPIOU . Se apenas copiou, o autor, as tags e os comentários vão aparecer duas vezes.

Procure por <div class='post-header-line-1'/> e cole os 3 códigos abaixo dela. 

Visualize . Tudo está em cima ? Ótimo ! Só falta enfeitar . Se não está, repita novamente as etapas com cuidado.

As barrinhas "||" são a parte mais fácil.  Coloque elas depois de cada </span> dos 3 códigos .

Você pode separar com outras coisas como - ou ♥, a escolha é sua.

Agoras as linhas pontilhadas e tals:

Procure por h3.post-title {  vai haver alguma código abaixo, depois que ele termina, vai aparecer um } e é depois desse } que você vai colar isto:

( O código abaixo é o que eu editei para usar aqui no enjoy )

 Obrigada ao blog Go Imagine pela base do código das barras.

.post-header, .dados {

    border-top: 1px dashed #ccc;

    border-bottom: dashed 1px #ccc; /*cinza*/

    padding: 1px 0 1px 12px; /*espaço topo direita baixo esquerda/*

    margin: 0;

    border-bottom: 1px dashed #ccc; /*cinza*/

    text-align: center;

    }

Edite como quiser e visualize para ver se está tudo correto, dúvidas ? Pelos comentários .