09/01/2015

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. 

11 comentários:

  1. gostei bastante do tuto, estava procurando esse tuto mas n achava em lugar nenhum, e também queria saber se você poderia ensinar como criar um layout por favor ? beijos

    ResponderExcluir
    Respostas
    1. Que bom que gostou *3*
      Talvez eu faça, mas vai demorar um pouquinho :/

      Bjoos! ♥

      Excluir
  2. Nuss meu pesamos pela sua cachorrinha. Eu tinha um rottweiler, era da família desde filhotinho morreu bem velhinho eu ñ sei q doença era, mas disseram que paralisaria o quadril dele, com o tempo ele ficou bem debilitado e acabou falecendo. :( eu curti o tuto coisas assim deixa o lay simples e charmoso.

    http://animesjaychan.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada...
      Meus sentimentos pelo rottweiler...
      Esse tuto deixa o layout bem charmoso mesmo!

      Kissus ^.~

      Excluir
  3. Amei o tuto!!!! Vou tentar fazer... Bjos!

    ResponderExcluir
    Respostas
    1. Que boom! *--*
      Espero que consiga fazer!

      Bjooos ♥

      Excluir
  4. Obrigada pelo tutorial <3 Esse serviu bem direitinho quando eu fui fazer -q

    MadnesShoujo | [visite]

    ResponderExcluir
    Respostas
    1. Que bom que te ajudou!!
      Visito sim!

      Bjooos *--*

      Excluir
  5. nossa e bem dificil esse post confesso que nem li tudo kkkkkkkkkkkkkkk
    vc tem bom gosto para layouts esta lindo esse!@
    seguindo segue de volta?
    http://queen-of-angels-html.blogspot.com.br

    ResponderExcluir
    Respostas
    1. rsrs' Eu tento fazer post não muito grande, mas alguns tutoriais me obrigam O.o
      Muito obrigada *--*
      Estou seguindo!

      Bjoos ^.~

      Excluir
  6. Como adicionar o horário da publicação depois do autor?

    ResponderExcluir

♥ Comente algo relacionado ao post !
♥ Proibido xingar, ofender e ser agressivo !
♥ Seja educado (a) !