Autor, marcadores e comentários abaixo do Título do Post

Oiiiiiie coelhinhos *-* Como estão hoje??

Eu não estou tão bem assim... minha cachorrinha morreu anteontem. O nome dela era Lady e tinha 9 anos. Ela sofria com uma doença chamada cinomose e tinha hérnia de disco. A cinomose paralisou as suas patas traseira e por causa disso, ela não podia andar. Ela sofreu muito com essa doença, e o pior, não tinha cura :( 

Estou muito triste com o falecimento dela ,mas estou aliviada por ela esta descansando em paz  e não esta mas sofrendo! ~

Hoje trago um tuto a pedido de uma leitora do blog, que foi de por os links do Post-footer (autor, marcadores e comentários) abaixo do título do post!

O tutorial é bem complicadinho e requer MUITA atenção, mas tentarei ao máximo explicar bem explicadinho para que você consiga entender facilmente!!! Vamos ao tuto o/

 Antes de fazer as modificações, salve um backup do seu blog!

FAÇA O TUTORIAL COM BASTANTE ATENÇÃO E SEM PREÇA!

Primeiro você vai em Layout  Postagem no blog  Editar e deixe marcado igual a imagem:

E depois, logo abaixo coloque da mesma forma, como mostra a imagem:

Transfira as "opções'' , abaixo onde está escrito " Título da postagem ". Depois Salve!!

Depois vá em seu Editor e procure por: 

<div class='post-footer-line post-footer-line-1'>

Você vai achar isso:

Repare que ao descer um pouco você vai encontrar :

 <div class='post-footer-line post-footer-line-3'><span class='post-location'>

Selecione desde:

<div class='post-footer-line post-footer-line-3'><span class='post-location'>

Até:

<div class='post-footer-line post-footer-line-1'>

~A imagem está horrível, mas é o exemplo do que terá que selecionar~

E substitua por:

    <div class='post-footer-line post-footer-line-1'/>
      <div class='post-footer-line post-footer-line-2'>
       </div>
      <div class='post-footer-line post-footer-line-3'><span class='post-location'>

Ficando assim:

Visualize para ver se deu algum erro! Se não deu erro, continue com o tutorial!

Agora procure por:

   <div class='post-header'>

Terá DOIS resultados, iremos modificar o segundo!

Abaixo do código que procuramos, coloque:

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

                <data:post.commentLabelFull/>:

              </a>

            </b:if>

          </b:if>

        </b:if>

      </span> | <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-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> <span class='post-icons'>

        <!-- email post links -->

        <b:if cond='data:post.emailPostUrl'>

          <span class='item-action'>

          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>

              <img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>

          </a>

          </span>

        </b:if>

        <!-- quickedit pencil -->

        <b:include data='post' name='postQuickEdit'/>

      </span>

Ficando assim:

Visualize e veja se ficou assim:

Se ficou igual a imagem acima, você fez tudo certinho!

Agora para editar os links e centralizá-lo, você vai procurar por:

.post-footer {

Você irá achar ele assim: 

.post-footer {
  margin: .5em 0;
  line-height: 1.6;
}

Substitua por: 

.post-header { text-align: center; /*Alinha no centro*/
padding-top: 5px;
font-size: 11px; /*Tamanho da fonte*/
border-bottom: 2px solid #A3A2A2; /*Borda inferior*/}
.post-header a { color: #696969;!important; /*Cor dos links*/}
.post-header a:hover {color: #fff !important; /*Cor dos links ao passar o mouse*/}

Visualize novamente e veja se centralizou. Depois Salve!

 Espero que tenham conseguido!!! Qualquer dúvida ou se estiver tendo problemas, deixe nos comentários que tentarei ajudar!! Bjos e até a próxima ♥

Tirei esse tutorial do Blog Sweet of cherry, mas da forma que estava ensinando lá, estava dando erro, então eu tive que simplificar e tirar algumas coisas. Quando usar dê créditos ao Sweet of Cherry ou Sonhos HTML.