Autor, Tags e Coments abaixo do título

Hoje vou postar um tuto bem conhecido por vocês (ou não), nossa amiga Anjinha Nati  (é assim que esta o nick dela) esta com dificuldade de encontrar, Ela queria saber: como colocar Postado por e tals em baixo do título do post ? por isso.. Seus problemas acabaram \o/ eu fiz o tuto p/ tu que até minha prima entendeu..e saiba que ela tem 'dificuldades do tamanho do Godzilla' com essas coisas de computador/internet como ela mesmo diz rsrs..




 Vá em Design    Editar HTML    Marque:  Expandir modelos

 Ctrl f e procure por: post-footer-line   (é onde estão os códigos)

Recomendo que use o bloco de notas  pois vamos recortar os códigos e colar em outra parte do Html, 

 Importante: Preste atenção e recorte sempre desde <span class= até </span> como eu destaquei em rosa, ao contrario vai dar erro no html

Os códigos à serem recortados são:

Código do autor do post
<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>

Código dos 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>

Código dos 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>
Para não errar cada código que recorto eu vizualizo p/ ver se não deu erro no html e se copiei certinho, assim não preciso apagar todo código caso algo dê errado.:)

Depois de recortá-los aperte Ctrl F novamente e  procure por: <div class='post-header-line-1'/>  
e abaixo desse trecho cole os códigos recortados, automaticamente ficarão lado à lado, mas caso você queira deixar uma a baixo do outro, basta colocar <br/> depois de cada </span>

Vai ficar assim:

Se quiser colocar aquela borda como a que eu uso:

Exemplo:

 É só apertar Ctrl f e procurar por: .post-header {
  Antes de fechar a chave cole o seguinte código:
text-align:center; /*Centraliza o texto*/
border-top: dotted 1px #ddd;
border-bottom: dotted 1px #ddd;
 Se por acaso do destino (rsrs) não encontrar esse código cole depois de fechar a chave de h3.post-title
.post-header {
text-align:center;
border-top: dotted 1px #ddd
border-bottom: dotted 1px #ddd;
padding: 3px; /*Espaço palavra e linha*/
margin: 8px; /*Margem da linha com o post*/
line-height: 10px; /*tamanho (altura) da linha (borda)*/
}

Assim:

 Se quiser alterar o tamanho da fonte, adicione antes de fechar a chave do .post-header { 

font-size:12px; /*Tamanho que quiser*/

 E se quiser colocar aquela barrinha divisória  é só acrescentar | no fim do </span> dos códigos.

Estilos de borda aqui: aqui
     Tabela de Cores aqui

Obs: Testado  no template Travel (viagem) e Watermark (espetacular)

40 comentários:

  1. tá bom, esse tutu é perfeito. tenha uma ótima terça feira, e uma boa tarde, ei espero sua visita lá no meu blog tá? adoro os seus recadinhos por lá.



    garota-fashiion.tk

    ResponderExcluir
    Respostas
    1. que bom que gostouu e brigaduu xuxu p/ vc também uma ótima terça ^-^

      Excluir
  2. Ah, esse tutorial é muito bom. Uso ele lá no blog. Dá uma dor de cabeça danada para fazer, mas vale a pena...
    Abç

    http://adraftbox.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. :) é verdade tem que recortar os códigos bem certinhoe colar tbm..pq se não..dá erro ¬¬ é um sakinho mais concordo que vale a pena ^-^

      Excluir
  3. Amei kaakah !! nunca mais vi seus comentários lá no blog hein?? n liga para o layout esta em construção mais vai ficar pronto hoje !!
    http://sweet---rock.blogspot.com.br/

    ResponderExcluir
  4. Tutorial ficou ótimo ^^ É bem mais simples do que o que utilizo no blog rsrs

    Antes do Salto || Facebook

    PS: Seguindo flor...

    ResponderExcluir
  5. Arigatou, Kaakah, por fazer um tutorial para resolver a minha dúvida. :3 Mas encontrei a o mesmo erro que acontecia nos outros Blog's: não encontrei um dos códigos. :\ Não sei se é por causa do template ou que eu já havia apagado quando eu ia pôr outro código.
    Mas obrigada pela mega-atenção. E ainda bem que resolveu a dúvida de outras pessoas, também. :)
    Kissus!

    http://anonlypossibility.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. que pena...eu testei em dois modelos e esse Watermark (espetacular) não tem quase nada =/ tive que acrescentar códigos..é pode ter sido apagado

      Excluir
  6. Ameei, fica muito legal *-* (acho que vou usar no próximo lay *-*)

    Beijoos ;*
    www.mikicandy.tk

    ResponderExcluir
  7. Muito bom o tutorial,Bem útil!^^
    Obrigada pelo carinho e pela visitinha la no BarbieLicious Pink
    uma boa semana
    xoxo!!

    ResponderExcluir
  8. Fofa,amei seu blog
    ja estou seguindo segue lá o meu se poder
    http://blogdabrendinha10.blogspot.com.br/

    ResponderExcluir
  9. Adoreei! *-*
    Ainda não tinha visto esse tutorial, fica super fofo ^^
    Beijoos ^^

    harajukucriativa.blogspot.com

    ResponderExcluir
  10. Tutorial bem bacana :) adorei
    http://kelly-club.blogspot.com.br/

    ResponderExcluir
  11. AAAAAAINW , aqui é mt fofo ><
    Ameeei *o*
    Supewr seguindo (:
    http://rebecafashionworld.blogspot.com.br/

    ResponderExcluir
  12. Haay Kaakah <33 Eu fiz no primeiro lay do blog, lembra? Mas a Kaori não ensinou direito aí ficou em cima e em baixo ;D Vlw ^^ Bezões Luuh
    Rawr Girl ~> teenstyle.com

    ResponderExcluir
  13. Adorei o tutorial. Vou usar no meu proximo lay. ^^
    http://littlebadgirlcute.blogspot.pt/

    ResponderExcluir
  14. eu amo seu blog! Tutorial muito util!

    Beijos~

    ResponderExcluir
  15. Own bem bacana o tutorial flor*
    http://maniasgirls.blogspot.com.br/

    ResponderExcluir
  16. Ótimo tutorial, já tentei mas não consegui. É meio complicado, vou usar no próximo lay do blog ><

    Beijos ;*
    refugio-teen.blogspot.com.br

    ResponderExcluir
  17. Oie, achei muito fofo o seu blog e ja estou seguindo ^^
    Se puder dar uma passadinha no meu também
    Bjus

    http://therevolucaonerd.blogspot.com.br/

    ResponderExcluir
  18. Ótimo tutorial,você explica bem. Conheci o seu blog no CandyLLand e gostei muito,já estou seguindo e voltarei aqui mais vezes. Você pode visitar o meu blog?
    http://i-teenbr.net.tc

    ResponderExcluir
  19. Ameeeeeeeeeeeeeei esse tutorial, estava precisando!

    Beijão, lindo seu blog!

    http://isabellasoaress.blogspot.com.br/

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

    ResponderExcluir
  21. Flor tem cmo vc fazer pra mim???
    Sou horrivel em HTML me diz que sim vai....

    ResponderExcluir
  22. não consegui ;//
    não aparece nada só a borda ;/

    ResponderExcluir
  23. Como eu faõ pra reverter se não tiver dado certo?

    ResponderExcluir
  24. Eu fiz td certo mais na hora de terminar quando tem q colcar td o codigo embaixo daquela tagno fim que começa a dar erro no HTML me ajuda?

    ResponderExcluir
  25. Eu amei esse tutorial, mas não dá certo, tentei várias vezes, mas da erro na hora de visualizar. O blogger não consegue ler o código, algo assim. Que chato isso.

    ResponderExcluir
  26. O seu blog esta lindo, e tem tutoriais que foram muito úteis lá no meu blog.
    Já estou seguindo! Segue de volta se gostar!

    Bjo
    http://p-liveorexist.blogspot.pt/

    ResponderExcluir
  27. o único blog que conseguiu me ajudar OBG ^^

    ResponderExcluir
  28. Oi, não deu certo, só aparece as bordas =/

    ResponderExcluir
  29. Ooi (: , amei o blog e o tuto ! mas eu fiz tuudo o que vc disse e no final deu erro :/

    ResponderExcluir
  30. Oiii, eu gostaria de saber como colocar aqueles menus bonitinhos estilo esse: http://animeemmangaa.blogspot.pt/
    Eu adorei!! E queria muito colocar no meu blog... Como eu faço??
    Beijos,
    Misa-chan
    apenasmaisumaotome.blogspot.com.br

    ResponderExcluir
  31. Eu não recorto os códigos. Faço de outro jeito, mais fácil. Só colocar o | No próprio sem recortar '-'
    Fica a mesma coisa. ~~'

    Adorei o blog, beijos.

    ResponderExcluir