Comentários, autor e Marcadores embaixo do título

kkk', postagem editada mais de 3 vezes. Aviso, amanhã é o resultado do concurso, se quiser participar,  ainda há tempo, clique aqui.

Yoo ~ como vocês estão?
Eu queria agradecer pelos elogios no post anterior. Muito obrigada mesmo, pois apesar de eu achar o layout free meio esquisito, vocês falaram que gostaram. Amo vocês seus lindjos.
Então, alguém lá ask pediu um tutorial (aleluia senhor) de como colocar comentários, autor e marcadores embaixo do título do post. Vai ficar assim:

(Ignore a qualidade da imagen :P)

Então, vamos aprender?
Primeiro, certifique-se que esses itens estejam visíveis no final do post. Depois, coloque-os alinhados desse jeito:

Agora, vá em editar html e procure por  <div class='post-footer-line post-footer-line-1'> 
Irá mostrar dois resultados de busca, então você vai no primeiro, ou seja, 1 de 2.

Selecione tudo desde  <div class='post-footer-line post-footer-line-1'>  até </div> e apague:
Vai ficar assim:


Agora aperte Ctrl+F novamente e procure por: 
 <div class='post-header'>

De novo aparecerá dois resultados, e novamente iremos para o primeiro. Abaixo dessa linha que você procurou, cole o seguinte código:
<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>
Salve. Agora visualize e se estiver tudo certo continue. Se não, refaça tudo de novo.
Agora, vamos personalizar os links:


.post-header { text-align: center; /*Alinha no centro, mude de acordo com sua preferência*/
font-size: 11px; /*Tamanho da fonte*/
border-bottom: 1px dashed #000; /*Borda inferior*/}
.post-header a { color: #000 !important; /*Cor dos links*/}
.post-header a:hover {color: #fff !important; /*Cor dos links ao passar o mouse*/}
font-size: 11px; /*Tamanho da fonte*/border-bottom: 1px dashed #000; /*Borda inferior*/}.post-header a { color: #000 !important; /*Cor dos links*/}.post-header a:hover {color: #fff !important; /*Cor dos links ao passar o mouse*/}
 Modifique de acordo com o estilo que você quer, depois salve.
E aí, gostaram do tutorial? Ele é meio grandinho e necessita de muita atenção. Espero ter ajudado vocês.
Kissus

24 comentários:

  1. Adorei Tuto bem útil ( Linda você pode postar sim :D

    ResponderExcluir
  2. Fica lindo isso tudo embaixo do título da postagem *-* Acho que fica mais organizado, não sei u-u
    Mó faciiiiiiinho! Adorei

    release-ur-imagination

    ResponderExcluir
    Respostas
    1. Obrigada sua fofa, que bom que gostou ♥

      Excluir
  3. Ótimo tutorial Mandi. Eu estava editando um template um dia, e tentei fazer isso, meu template bugou do cabeçalho até o rodapé /: Nem tento mais. Novamente, gostei do tutorial :33

    Kissus
    Prince Modern

    ResponderExcluir
    Respostas
    1. Obrigada. Um dia fui fazer também no meu blog antigo, ele virou um bagaço. Passei três dias louca, pois o layout estava divo e tive que fazer tudo de novo kkkk'
      Kissus

      Excluir
  4. Adorei o tutorial, esse é o único que não é tão difícil, AHSUHAUSHAU'

    Modern HTML

    ResponderExcluir
  5. Eu acho baca esse tuto , fica otimo !
    www.mymomentsz.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigada, concordo contigo, fica muito fofinho :D

      Excluir
  6. Legal o tutorial, muito bem explicadinho!
    Dá uma passadinha?
    http://be-maybe.blogspot.com.br/

    ResponderExcluir
  7. Eu tentei fazer uma vez, e perdi meu lay todinho. Ai trauma forever! :c
    Mais quem sabe eu não tente outro dia com o tutorial daqui? *U*
    Beijuhs. || †‏ Ieah

    ResponderExcluir
    Respostas
    1. kkkk' eu também tenho traumas no html :(. Obrigada, espero que faça sim :D

      Excluir
  8. Isso é bem útil mas eu nunca consegui fazer.kkk
    Um beijo
    http//bombasticmusics.blogspot.com

    ResponderExcluir
    Respostas
    1. kkk' obrigada, vai tentando que você consegue :)

      Excluir
  9. jah sabia do tuto, so nao de como separar com as barrinhas >////<

    ResponderExcluir
  10. Cara, tenho muito a te agradecer. Sempre sofri atrás desse tutorial e já me dei muito mal hauhauha
    Só uma pergunta: acho que acabei "apagando demais" e os links de compartilhamento e de reações sumiram D:

    Pode me ajudar?
    Cara, parabéns <3

    ResponderExcluir
    Respostas
    1. Claro, desculpe a demora. É só ir em layout, na caixa do post e marca colocar os botões de compartilhamento novamente *3*

      Excluir
  11. Oioi!! Onde cola a segunda parte do código??

    www.thingsofmilly.blogspot.com/

    ResponderExcluir
  12. Eu sou um anônimo muito legal :p haha' Ignorem gente, sou eu fazendo teste pra um tutorial ahuehue

    ResponderExcluir
  13. Eu adorei onde colamos a persanalização

    ResponderExcluir

Seu comentário é muito importante para o crescimento do blog, mas antes têm algumas regrinhas a serem cumpridas:
♥ Aceitamos pedidos de afiliação, somente se seguir o nosso blog;
♥ Comentários do tipo "seguindo,segue de volta, serão aceitos com prazer, afinal não é pecado pedir para seguirem seu blog, não é mesmo?;
♥ E é claro que eu visito seu blog, afinal é bom conhecermos novos blogs;
♥ Deixe o link do seu blog;
♥ Para mais informações, consulte a nossa FAQ