Páginas

20 março 2013

Comentarios, Autor e marcadores abaixo do título do post

Oi gente linda! Aqui é a Liah -como vocês podem ver pela imagem acima-

Primeiramente, quero dizer que estou muito feliz por estarem gostando das meninas da equipe. Recebemos algumas críticas maldosas e anônimas, mas isso é coisa de gente invejosa e esse tipo de pessoa a gente ignora.

Aos poucos estou fazendo os tutoriais da minha lista de pedidos (aqui um print pra quem não acredita na existência dela), e este é um dos que estão lá há um bom tempo, mas que ainda é muito útil e procurado.  Vocês irão aprender a colocar os links "x Comentários", "Postado por" e "Marcadores", abaixo do título dos posts. Eles geralmente ficam no final do post, mas é possível movê-los de lugar modificando alguns códigos do seu blog.  O resultado será esse:

Print do Kawaii World
Vamos começar?

Este tutorial mexe com códigos bem extensos, então preste bastante atenção e faça download do modelo do seu blog antes. Assim, se algo der errado é só restaurar como estava antes.

Primeiro verifique se esses links estão visíveis no final do post. Se eles não estiverem lá, vá em layout, clique em editar no gadget correspondente ás postagens e marque a opção correspondente a cada link. Depois certifique-se de deixá-los na mesma linha assim:


Agora abra o modelo HTML do seu blog, e marque a opção "Expandir modelos de Widgets"



Aperte Ctrl+F e procure por: <div class='post-footer-line post-footer-line-1'> Irá mostrar dois resultados, o que queremos para este tutorial é o primeiro (1 de 2)

Você verá vários códigos depois deste que procurou. Selecione tudo desde <div class='post-footer-line post-footer-line-1'> até </div> e apague. Deve ficar assim:


Agora aperte Ctrl+F novamente e procure por: <div class='post-header'>
Novamente teremos dois resultados, mas o que nos interessa é o primeiro. Abaixo dessa linha que você procurou, cole o seguinte código:

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>

Visualize se está tudo certo e salve. Para personalizar os links é só colar o código a seguir acima de ]]></b:skin> :

Código
.post-header { text-align: center; /*Alinha no centro*/
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*/}

Espero que todos consigam fazer :) Vou começar a responder os comentários que eu não puder retribuir aqui no blog mesmo então fique atento para ver a resposta para o seu.

Kissus da Liah!

66 comentários:

  1. Amei o tutorial Liah! E Não liga para essas pessoas invejosas :3

    the-kawaii-candy.blogspot.com.br

    ResponderExcluir
  2. Gostei o/
    antes eu não tava conseguindo *u*
    acho que agora consigo :3
    obrigada adália~♥
    Reign of Otakus♥

    ResponderExcluir
  3. Muito bom o tutorial, eu tava procurando há tempos :D
    http://the-paradiise.blogspot.com.br/

    ResponderExcluir
  4. Adorei esse tutorial, já estou usando no meu blog, ele é perfeito!
    anjodecereja.blogspot.com

    ResponderExcluir
  5. Sempre q tentei outros tutoriais de outros blogs nao consegui, este é dificil mesmo. está muito bem explicado. se eu conseguir, volto aqui. bjs quatroestacoes.blog.br

    ResponderExcluir
  6. Faz quanto tempo que não uso essa opção em algum layout meu, mas é tão fofo. Algo que eu observei é que aqui as instruções parece bem mais fácil, do que os outros tutoriais com a mesma finalidade em outros blogs. Sempre ajudando muito Liah. (:

    Beijos.
    - Always Fearless

    ResponderExcluir
    Respostas
    1. Que bom saber que estou facilitando a vida de vocês >.< rs
      Kissus!

      Excluir
  7. qquando eu era novinha por aqui, fui tentar fazer esse tuto, e aconteceu uma parada muito doida não ficou embaixo do titulo do post mais sim ficava dando erro o/
    mais vou tentar seguir por esse aqui o/
    acervo-de-livros.blogspot.com

    ResponderExcluir
  8. Verdade, ainda mais comentários vindo de anônimos, tudo ridículos sem coragem!

    Está mesmo de parabéns a equipe, bom que o blog irá ficar mais atualizado do que de costume né?! ^_^

    Haha' ótimo tutorial Liah, coincidência, acabei de postar no A.N ainda agora um tutorial sobre o post footer também hihi, só que o post foi diferente, o sue foi mais útil hehe!

    Adolescente Nerd

    ResponderExcluir
  9. Gostei da ideia, mas tem como deixar ele com esse mesmo efeito só que em baixo como divisor de postagem?

    Estou fazendo um Layout novo, peguem alguns tutos daqui, vou postar seus créditos no post de retorno das atividades, alguns deles foram muito úteis mas outros não deram certo. Obrigada!

    http://fashionistasassumidas.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Bom é só pegar o código css".post-header { text-align: center; /*Alinha no centro*/
      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*/}". E nas partes ".post-header"substitua por ".post-footer" (substitua todos) e pronto vai ficar como divisoria no final do post. beijoos

      Excluir
  10. Muito lindo e muito fácil haha. Ou seja, perfeito!

    Vou tentar ;)

    Beijos
    www.picturesandreams.blogspot.com

    ResponderExcluir
  11. Liah, esse foi o único que pegou comigo! Pois já havia tentado mais tinha conseguido! Sobre essas pessoas que comentaram em anônimo, são pessoas que não tem nada para fazer, é tem inveja do seu blog, que é mega divo!

    Kisus...
    Things Crazy

    ResponderExcluir
  12. Sim,consegui este !

    http://commands-of-my-life.blogspot.com.br/

    ResponderExcluir
  13. Super legal o tuto!

    princessofjeans.blogspot.com

    ResponderExcluir
  14. Ótimo tuto e bem explicado como sempre Lia, não é atoa que me ajudou desde o início hah <3

    Beijos!
    Too Kawaii

    ResponderExcluir
  15. Nossa, nunca consegui fazer isso, mas dessa vez eu vou tentar e acho que vai ficar certinho!!
    Ótimo tutô!
    Beijo :)
    pqngarota.tk

    ResponderExcluir
  16. ADOREI MESMO ADOREI< OBRIGADAAA >_< kissus ;3

    ResponderExcluir
  17. Adorei o tutorial! ^.^
    Já conhecia e o resultado é realmente incrível!

    Até mais :3
    @Catching Stars

    ResponderExcluir
  18. Alguem sabe como faço para editar o espaço dos meus comentarios e que ele fique aparecendo sem colocar ele em pop-up ?

    ResponderExcluir
  19. Adorei o tutorial!!
    Tá bem explicadinho e fica uma graça!

    Beijos!
    blogdaruiva

    ResponderExcluir
  20. Ameei o tuto, muito útil!! Tava atras dele a dias!! Já to usando X.X!!
    Vlw Liah!!

    ..::Loucura Controlada::..

    ResponderExcluir
  21. Amei o tutorial,mas não tô conseguindo usar.Beijos♥
    blogmakeshine.blogspot.com

    ResponderExcluir
  22. lool adorei, faz muito tempo que eu procurava esse tutu é nunca achava
    obrigada mesmo

    http://blog--da--moda.blogspot.com.br
    http://blog--sobre-tudo.blogspot.com.br

    ResponderExcluir
  23. Já usei algumas vezes. Acho que dá um toque de "delicadeza" ao blog.
    Pelo menos é assim que penso u_u
    Muito bem explicado ^3^

    Kisu
    http://the-kawaiis.blogspot.com

    ResponderExcluir
  24. Eu uso um parecido *u* Adorei o tutorial <3
    Beijos ~

    Sweet Geek || Clique no Perfil

    ResponderExcluir
  25. Este comentário foi removido pelo autor.

    ResponderExcluir
  26. Não consegui ;c
    http://bytheway-foryou.blogspot.com.br/

    ResponderExcluir
  27. oi Liah, como pode ver no meu layout q coloquei free, consegui fazer sim. só nao posso apagar div class='post-footer-line post-footer-line-1' se não dá erro. dai deixo la e deu certo. bjs
    quatroestacoes.blog.br

    ResponderExcluir
  28. Oie Liah, gente amei esse tuto vou usar no meu próximo layout. Flor não tive problema nenhum com as postadoras e não de bola para gente sem saber oque ta falando e sim muitos invejosos, olha se cada vez eu ganhasse uma moeda de 1 real de quantas invejosas que temos nossa!!! Já estava RICA,além não fique se estressando com pessoas sem gosto ;) beijos, bah flor eu queria ser postadora daqui que pena não tem mais vaga né flor??

    Beijinhos amooooooooooooo seu blog e amei o novo layout parabéns !

    ResponderExcluir
  29. Oi liah, tudo bem??


    http://glam4teste.blogspot.com.br/
    Eu tenho os comentários em baixo do título dos posts e eu queria retirá-lo dali e por para o rodapé do post, como faço???

    ResponderExcluir
  30. Oi lembro de quando o cherry bomb usava a data deste jeito

    ResponderExcluir
  31. é realmente legal o tuto Liah
    por isso que voçe é uma cherry kkkkk
    bombomkawaii.blogspot.com
    ele ainda não esta popular
    tchau ;)

    ResponderExcluir
  32. Acho que vai ficar um pouquinho mais difícil de colocar alguns códigos por causa da nova versão do html do blogger... :S

    (/ minhasstuff.blogspot.com \)

    ResponderExcluir
  33. Tava dando uma olhada em seu blog, achei lindo, e seus tutoriais são bem explicativos, parabéns.
    Queria colocar essa caixinha de comentar no final da postagem mas só fica o envelopinho :(

    ResponderExcluir
  34. Este comentário foi removido pelo autor.

    ResponderExcluir
  35. Eu fiz mais ai quando fui visualizar ficou em cima e em baixo ! :(

    ResponderExcluir
  36. Eu fiz ficou bom porem quando finaliza fica em cima e embaixo

    ResponderExcluir
  37. Os seus posts estão me ajudando muito com o meu novo blog!! Ah! E eu fiz em dois blogs a máscara e no primeiro ficou certinho e no segundo ficou em cima e em baixo!! Que pena que o blog foi excluído!

    ResponderExcluir
  38. Este comentário foi removido pelo autor.

    ResponderExcluir
  39. Este comentário foi removido pelo autor.

    ResponderExcluir
  40. Não estou conseguindo, me ajuda! :( Dá erro no xml, algo assim... http://cogumelocintilante.blogspot.com.br/

    ResponderExcluir
  41. Este comentário foi removido pelo autor.

    ResponderExcluir
  42. Consegui, mes daí fica o autor, as tags e os comentários certinhos abaixo do título do post, mas o que fica no footer não saiu, daí fica duas vezes :(

    ResponderExcluir
  43. Olá. No meu blog não tem a opção ]]> :

    ResponderExcluir
  44. eu estraguei meu blog fazendo esse tutorial

    ResponderExcluir
  45. Não estou conseguindo :(

    http://themonsterhighuniverse.blogspot.pt/

    ResponderExcluir
  46. Vou ver se consigo
    parece facil!
    Valeu pelo tuto! Estava procurando!!!
    http://docebunny.blogspot.com.br/

    ResponderExcluir
  47. lindinha.. deu certo mais fica aparecente repetido o q faço?
    http://melhor-metade.blogspot.com.br/

    ResponderExcluir
  48. Salvei não aconteceu nada '-'

    ResponderExcluir
  49. Salvei não aconteceu nada '-'

    ResponderExcluir
  50. Eu consegui mas queria que ficasse centralizado como faço?

    ResponderExcluir
  51. Gostaria de saber como posso remover o nome "marcadores" de lá.

    ResponderExcluir
  52. Me ajudou muito, mas por algum motivo
    Não conseguir colocar
    Sempre dá erro :\

    ResponderExcluir