Tags, autor e comentários abaixo do titulo da postagem

20 de nov de 2011

Hi imaginers! Quanto tempo né? Pois é, uma semana sem postar, desculpem mesmo, é que como sempre o tempo anda corrido pra mim rsrs São tantos compromissos: cursos, crisma, consultas rotineiras e por aí vai! Então hoje vim trazer o tutorial que algumas pessoas me pediram pra postar que é de como colocar os dados do post abaixo do titulo do mesmo. Vejam a imagem aí:

Gostou e quer aprender? Clica logo em leia mais!
Antes de tentar o tutorial salve uma cópia do seu template pra possíveis erros.
O tutorial pode parecer um pouco complicado logo de cara então leia atentamente antes de sair por aí fazendo tá? Mas garanto que não é difícil, só requer um pouquinho de atenção!
Abra o blog, vá em design, editar HTML e marque a caixinha "expandir modelos de widgets".
Tecle Ctrl F e procure por post-footer-line  , é onde ficam os trechos que vamos recortar. Sempre recorte de <span class=”(…)”> até </span>. Recomendo que recorte e cole no bloco de notas, facilita -e muito- o tutorial. Os trechos são:

(Autor do post)
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
(Marcadores)
<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>
(Comentários)
<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'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</b:if>
</span>
Depois de recortá-los procure por <div class='post-header-line-1'/>  de enter e cole os códigos que você recortou. Eles vão ficar como é aqui no blog, todos na mesma linha. Se você quiser colocar um em cada linha  é só colocar <br/> depois de cada </span> . 
Você pode mudar a ordem se quiser, é só trocar os códigos de lugar!
Para deixar com aquela divisória assim: | é só colocar ela depois do primeiro e do segundo </span>
Exemplo: <código do autor> | <código dos marcadores> | <código dos comentários>


Obs: Pode acontecer de ficar por exemplo as tags repetindo abaixo do titulo e no rodapé do post, para corrigir isso é só você procurar pelo código da parte que está repetindo e se tiver mais de um apague o que se refere ao post footer (rolando a página um pouco pra cima você vai achar, então saberá).


Vamos enfeitar?
Procure por h3.post-title { e depois de } (quando acaba o primeiro trecho) cole o seguinte código:

.post-header, .dados {
border-top: 1px solid #ccc;
border-bottom: solid 1px #ccc; /*cinza*/
padding: 1px 0 1px 12px; /*espaço topo direita baixo esquerda/*
margin: 0;
border-bottom: solid 1px #ccc; /*cinza*/
text-align: center;
}
Você pode mudar as cores (#ccc) a espessura das bordas (1px) e trocar solid por dashed para deixar a borda sublinhada.

Obs: Testado somente no template Travel!

Era isso, eu testei o tutorial em 2 blogs de teste e deu certo espero que tenham gostado e que vocês consigam fazer também. Lembrando que aprendi no Alma e coração, então créditos ao blog.


Aviso: Atualizei o tutorial da imagem no topo da área da postagem! Quem não conseguiu tenta de novo tá?
Beijos e fiquem com Deus!

Não me responsabilizo por o tutorial não funcionar, cada template é diferente e tem códigos diferentes, o que não funciona pra vocês podem funcionar pra outros assim como funcionou pra mim. Não posso fazer nada. 

96 comentários:

  1. Olá =)

    Muito bacana a dica.
    Estou seguindo,amei seu layout.

    Beijos.

    http://girlsupimpa.blogspot.com/

    ResponderExcluir
  2. Muito bom, estava procurando esse tuto a muito tempo e não achava :) Valeu Anny, vou testar já!

    http://freetogirls.blogspot.com/

    ResponderExcluir
  3. Ki lindo o blog meninas *-*
    Ameei !
    Kiss ♥

    #seguindo!

    http://fanideisi.blogspot.com

    ResponderExcluir
  4. Ótimo tutorial, vou usar.
    Participa?
    http://girlteen-s2.blogspot.com/2011/11/concurso-seu-blog-divulgacao-participe.html

    ResponderExcluir
  5. Não funcionou no meu layout. Quando fui vizualizar deu erro :(

    ResponderExcluir
    Respostas
    1. O meu também deu erro quando visualizei. Apareceu isso "Error 500".

      monaenrolada.blogspot.com

      Excluir
    2. Pois é meninas, esse tuto é bem complexo mesmo, um errinho e já não funfa! :(
      E é bem chato de explicar, pois varia bastante a posição dos códigos de template pra template! Uma pena :/

      Excluir
    3. Anny porque no Meu blog não quer dar certo, não acho estes codigos poxa :(((

      Excluir
    4. Letícia Melo17/02/13 12:50

      O Meu Tbm Não deu certo Não aparece "post-footer-line"

      Excluir
    5. Eu não consegui achar post-footer-line mais o meu é o Travel!!

      Excluir
    6. tentem usar expandir os modelos widget.... no meu apareceu umonte :3

      Excluir
    7. E só Expandir os modelos de wid...e tal!

      Excluir
  6. Gostei desse tuto \O/
    Com certeza estará no meu próximo lay x3

    Muito fofinho o seu,passa uma calma pra gente *-*
    Adorei e já estou te seguindo ;)

    Se puder(e quiser,é claro :B) seguir de volta eu agradeço ^o^/
    http://deliciousavatares.blogspot.com/

    ResponderExcluir
  7. Ótima dica! Vou aprender direitinho e assim posso fazer meu layout. Obrigada!

    Quem gostar do meu blog, siga? Sigo de volta todos! Muito obrigada :D

    http://pequenairritante.blogspot.com

    ResponderExcluir
  8. O que acontecia é que na hora de vizualizar nem abria o blog, dizia que tinha erro...Não faço a menor ideia do que aconteceu! :(

    ResponderExcluir
  9. Ah, percebi que meu tutorial funcionou aqui, né??

    ResponderExcluir
  10. Post novo: girlteen-s2.blogspot.com

    ResponderExcluir
  11. que blog Liindo ♥
    seguindo , espero que segue de volta
    http://portaldisturbiablogger.blogspot.com/

    ResponderExcluir
  12. Oi Anni vim avisar que o nome e o link do blog mudaram, fiz um post explicando o porque.

    Novo Nome: Rosa Chiclete
    Link: http://blogcandydreams.blogspot.com

    ResponderExcluir
  13. amei o tuto. Seguindo, segue de volta flor?
    http://tamichesteen.blogspot.com/

    ResponderExcluir
  14. Oi! Tudo bom ?
    To passando aqqi pra dar um oi & pedir que voce visite meu blog, agradeço mt se voce deixar um comentario legal =)) ‘
    Beeijos e obg pela atenção
    www.paradateen1.blogspot.com / @luoliveira6

    ResponderExcluir
  15. Tem uma tag pra você lá no meu blog:

    http://queloucura-blog.blogspot.com/2011/11/tag-3-manias-estranhas-que-voce-tem.html

    ResponderExcluir
  16. É tão fofo assim!
    pinkpimenta.blogspot.com
    visita?

    ResponderExcluir
  17. No meu blog não deu certo. Eu fiz tudo certinho e meu layout é do modelo travel.

    cdiasblog.blogspot.com

    ResponderExcluir
  18. 1º você parece uma boneca de tão linda!
    2º Seu blog é um espetáculo!
    3º seus tutoriais estão na minha barra de favoritos e vão me ajudar muito no meu layout novo!

    www.meninamania-juh.blogspot.com

    Beijos, Ju.

    ResponderExcluir
  19. Anny, tem post novo no Rosa Chiclete >> Comenta?

    http://rosaschiclete.blogspot.com

    ResponderExcluir
  20. Olá.Essa é minha primeira visita ao blog.Vi seu link em outro blog e resolvi vir conhecê-lo.Adorei seu blog e já estou lhe seguindo.Seu blog é muito bem organizado e suas postagens muito bem elaboradas.
    Te convido a conhecer meu blog e segui-lo também.Aguardo sua visitinha!
    Bjs!
    Zilda Mara
    http://www.cacholaliteraria.blogspot.com

    ResponderExcluir
  21. Ja estou Seguindo este Lugar LIndo !
    Afiliações ? Se Puder segue o Meu Ficaria MUito grato !
    http://yousit.blogspot.com/

    ResponderExcluir
  22. Ameii seu blog! Ja estou seguindo,adoraria ter vc como seguidora! Segue? http://blogteen-forever.blogspot.com/
    Beijos

    ResponderExcluir
  23. Parceira, o Happy Charllote mudou de layout e de banner também! Estou avisando para você poder mudar! Beijos!
    www.happy-charllote.blogspot.com

    ResponderExcluir
  24. Oi linda, adorei que você tenha pedido afiliação, mas eu ainda não sei se vou abrir, mas, com certeza, se eu abrir, eu aceito com o seu simplesmente perfeito blog!

    ResponderExcluir
  25. Agora consegui fazer. Deu até pra colocar uma divisória no fim do post!

    cdiasblog.blogspot.com

    ResponderExcluir
  26. Ótimo tutorial :D

    Tô seguindo seu blog, será que você poderia seguir de volta?
    http://blogpinkdaana.blogspot.com/
    Deus te abençoe!

    ResponderExcluir
  27. Oii anny*--* pra dizer a verdade não conseguir,mas eu achei uma maneira de fazer sabe que era junto com o cabeçalho dai deu serto! conseguir fazer esse tuto tbm deu certo*--* gosti muitooo!
    espero que continue postando tutos perfects uahs'
    bjs..

    ResponderExcluir
  28. Oi Amor, amei seu blog, já usei até algumas bases de cabeçalhos que você meosra aqui.

    Tô seguindo segue lá? http://www.amodaemalta.blogspot.com/


    Kissus =*

    ResponderExcluir
  29. No meu não deu certo... Eu nem achei aquele trecho que é pra achar. E o meu template é o travel (viagem).Você pode me ajudar? Desde já agradeço! Beijos,seu blog é muito lindo.

    www.meninacute-s2.blogspot.com

    ResponderExcluir
    Respostas
    1. ah, agora eu achei. tinha esquecido de expandir os widgets. que burra. mas mesmo assim não deu certo, deu o tal do erro 500 :/ ah, que pena.

      Excluir
  30. Não consegui, deu erro na hora de visualizar! Ajuda?

    ResponderExcluir
  31. Consegui!
    Esse tutorial me ajudou muito *-*
    Valeu :D

    ResponderExcluir
  32. Não conseguui :(
    Não encontrei nenhum dos trechos, e meu modelo é o travel também. E não achei em nenhum outro blog um tutorial que desse certo comigo, mimi
    que triste
    você sabe o que posso fazer?
    bjs
    blog-salto-alto.blogspot.com

    ResponderExcluir
  33. eu não consigo fazer :(
    Não sou boa derecortar HTML

    ResponderExcluir
  34. Tinha esquecido dessa ultima parte haha
    Já coloquei lá (:
    De novo, muito obrigada rs

    blog-salto-alto.blogspot.com

    ResponderExcluir
  35. Muito bom esse tutoria, foi difícil na primeira vez mas eu consegui *---*

    ResponderExcluir
  36. poooooooooor que no meu nao ta dando?? :(

    ResponderExcluir
  37. Nossa flor não consigo fazer de jeito nehum lá no blog, ja tentei ate num blog de texte e não consegui =(

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

    ResponderExcluir
  39. Oi, td bem ?
    Então eu fiz tudo certinho só que na hora de ficar uma barrinha de divisória não deu
    Ex: Postado Por: .....| Tag's:....| 5 comentarios
    ficou assim:

    Por: ..... Tag's:.... 5 comentarios
    o que faço ?
    Obrigado desde já.

    ResponderExcluir
  40. Oi, rs'
    então eu não tinha conseguido, depois eu li de novo o tutorial, ai que eu vi que tinha que por "|" kkk, vlw, seu log é mto lindo (:

    ResponderExcluir
  41. ai linda
    amei
    http://younggirlstyleoficial.blogspot.com/

    ResponderExcluir
  42. olá
    Estão abertas as inscrições para um super concurso lá no blog:
    http://www.senhoritaperfeita.blogspot.com

    ResponderExcluir
  43. Uhuul esse funcionou!! hausahuashaush Amor amei o post \oo meu blog d+ ;]
    beijooos!
    http://abouteverything-cm.blogspot.com

    ResponderExcluir
  44. Valeu parceiro pela dica, deu certinho do geito que está no meu blog, se eu trocar a posição dos códigos por "postado por itapiunainforma às 00:00:00" fica assim "postado por itapiunainformàs 00:00:00, tem como consertar?, obrigado.

    ResponderExcluir
  45. Nossa essa eu vou usar!! Seu layout tá lindo e outros também foram (não mais que esse né kk) Amore olha pode me ensinar a como personalizar os comentários

    ResponderExcluir
  46. Também não consegui aqui =(

    ResponderExcluir
  47. Não consigo me ajuda preciso disso :(

    ResponderExcluir
  48. V-A-L-E-U! Mesmo, viu! Obrigada, thankis veri mati... A-D-O-G-O.

    ResponderExcluir
  49. Olá. Adorei o tutorial, mas como faz o | entre os ítens? Como no de vocês (Postado por Anny S. | Tags: seu blog, tutoriais |)

    Muito obrigada, beijo. Trashy Splash.

    ResponderExcluir
  50. O flor,estou tentando fazer esse tutorial já refiz umas 10x mais só da erro,explica ai:eu recorto esses trechos e colo dentro do primeiro trecho que vc diz pq aparece uns dez trechos iguais e outra dúvida é qnd recorto e colo no bloco de notas eu apago o que tá no html ou deixo,não sei o que fazer...?

    ResponderExcluir
  51. Não deu, Anny :( Vi que muitas pessoas disseram que deu erro, no meu também :s
    Sabe como se ''ajeita'' isso?
    Bjs, ladybugs.tk

    ResponderExcluir
  52. Oie, seu blog é lindo e muito util.
    Mais não sei o que pode estar dando errado por aqui já tentei fazer umas 3 vezes e ele da esse erro " Erro ao analisar XML, linha 1189, coluna 15: The element type "div" must be terminated by the matching end-tag "". poderia me ajudar ?
    Beijos

    ResponderExcluir
  53. Não funcionou no meu, o que será que é?

    ResponderExcluir
  54. Não consegui fazer isso , alguns codigos quando eu colocava ctrl + f , não tinha no html :/

    ResponderExcluir
    Respostas
    1. Pois é, pra mim também.

      Excluir
  55. Sempre deu erro quando eu fiz :/

    ResponderExcluir
  56. muito bom ^^ mim sequi por favor.

    http://meninovisualnerd.blogspot.com.br/
    kyssus <3

    ResponderExcluir
  57. Nossa depois de um século eu consegui era que eu não tava cortando e colando certo os códigos vlw flr *-*

    ResponderExcluir
  58. Poxa, poxa. quero tanto conseguir colocar meu nome no início do post. Já fiz de tuuudo, já vi vários tutoriais e sempre dá o mesmo erro, que eu tenho certeza que não há erro nenhum! rs como pode?

    ResponderExcluir
  59. Eu acho melhor fazer uma video aula.
    Não estou conseguindo sempre da erro.

    ResponderExcluir
  60. Oi fofa! Legal o tuto, mais eu nao consigo coloca sabe esse código:

    dos comentários? então o maiorzinho eu não acho!
    Então eu procuro ele e não acha!
    Aqui ta rolando um sorteio de um blog no meu BLOG. Participa?

    http://pop-rocker.blogspot.com.br/2012/08/sorteio-meu-mundinho-louco.html

    ResponderExcluir
    Respostas
    1. Que chato isso, mas tenta procurar um que seja parecido!

      Excluir
  61. Ooi também não to conseguindo, eu quero colocar a data, os comentários e as tags mas não dá certo. Quando tiro os códigos e coloco em baixo da <*div class='post-header-line-1'/> quando visualizo não tem mais nada, some data, tag e "nenhum comentário". Alguns códigos são bem diferentes...
    To vendo que tem bastante gente com problema, não dá pra ajudar não?
    Agradecemos se você ajudasse ♥

    ResponderExcluir
    Respostas
    1. Que chato flor! De fato esse tuto é bem complicado mesmo pois é raro ter os códigos iguais... Tem certeza que não apagou o código errado?

      O pior é que eu não tenho muito o que fazer por você, sinto muito flor :(

      Excluir
  62. Nossa, Anny! Tem um problema, quando vou pesquisar os códigos dos comentários, não tem. O que eu faço? Alem disso, fica muitoooooooooooo fofo!
    Segue meu bloguito?
    http://pop-rocker.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que pena, tá dando esse problema com bastante gente porque cada template tem um código diferente, e as vezes vários códigos parecidos. Tente achar um que seja parecido com o que dei (:

      Excluir
  63. Fiz eu consegui colocar no meu blog, adorei!
    Continue sempre!
    Beijos.

    ResponderExcluir
  64. Também tive o Erro 500 e fiz tudo direitinho. ;/

    ResponderExcluir
  65. Nossa Consegui achar o Tuto Finalmente
    Me ajudou muito *-*
    The-dream-perfect-blogspot.com

    ResponderExcluir
  66. Olá docinho, estou comentando pra dizer que usei no meu blog e está o máximo. Obrigada pelo tutorial, foi muito útil.

    ResponderExcluir
  67. *aaaa* tava procurando por esse tuto há um tempão! obrigada!
    -xoxo

    http://s2juuh.blogspot.com.br/

    ResponderExcluir
  68. *AAA* tava procurando por esse tuto há muito tempo! obg!
    -xoxo

    http://s2juuh.blogspot.com.br/

    ResponderExcluir
  69. Eu não consegui, estava dando mensagem de erro :(

    ResponderExcluir
  70. Pequeno probleminha...

    As tags mudaram como prometido...só que no template do meu blog tem as miniaturas das postagens na tela inicial...e ai as tags também apareceram nessas miniaturas, o que ficou feio né ...se alguem souber como resolver isso agradeço...

    meu blog: brasil-hq.blogspot.com

    ResponderExcluir
  71. Oi eu tentei fazer no meu blog mais agr está tudo desorganizado, o eu faço para ele voltar ao normal? acho que fiz algo errado!

    ResponderExcluir
  72. Anny, os meus marcadores não querem aparecer :(

    ResponderExcluir
  73. Que tuto lindo, eu fiz uma vez e não consegui, daí fiz de novo e consegui!
    u.u Beijos -> www.justgirl-oficial.blogspot.com

    ResponderExcluir
  74. Ameiiiiiiiiiiiiii nossa que legal! ficou do jeito que eu queria

    ResponderExcluir
  75. Ficou otimo! Obrigada
    http://ideiadela.blogspot.com.br/

    ResponderExcluir
  76. Deu certo a dica :) E o seu blog é lindo!
    http://www.revheimdicas.blogspot.com.br/

    ResponderExcluir
  77. agora acho que entendi tem que apagar ate span e substituir pelo codigo que vc deixo aqui?

    ResponderExcluir
  78. Valeu, tutorial muito bom!!!

    ResponderExcluir

- Comentários do tipo "seguindo, segue de volta" "lindo o blog, seguindo, retribui?" Serão ignorados se não tiverem uma opinião sobre o post em si.
- Não aceitamos mais selinhos e tags, sorry!
- Leia a página "FAQ" e outras páginas internas antes de perguntar qualquer coisa.
- Sua opinião é sempre bem vinda. Mas seja educado!

© Go Imagine - 2014. Todos os direitos reservados.