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


http://sonhoshtml.blogspot.com.br/2015/01/autor-marcadores-e-comentarios-abaixo.html

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.

Postar um comentário

0 Comentários