Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Iniciantes Postagens Vanessa S.

Data das Postagens abaixo do Título do Post

Nos templates padrões do Blogger, a data dos posts aparecem sempre na linha acima dos títulos das postagens.
Neste tutorial você vai aprender a configurar a data, colocando-a na linha abaixo do titulo ou no rodapé do post.

Se você verificar no código do template, a data do post é mostrada da seguinte forma:


<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Em alguns modelos ela vem assim:


<b:if cond='data:post.dateHeader'>
<span class='date-header'><data:post.dateHeader/></span>
</b:if>

Para você conseguir localizar o código referente á data, será necessário que você entre no menu “modelo” >> “editar html”, clique na opção “expandir modelos de widgets” e procure pelo trecho mostrado acima.

2

Colocar a Data abaixo do título do post:

Recorte todo o trecho referente a data, conforme mostrado acima e cole ABAIXO da tag <div class=’post-header-line-1’/>

Observação 1: Geralmente a tag ‘post-header-line-1’ está fechada com uma barra inclinada no final dela ” />”.
É necessário retirar essa barra e fechar a tag após a inclusão do novo elemento. para fechar, use </div> no final do código.
Exemplo:


<div class='post-header-line-1'>

</div>

Após modificar o código, você pode aplicar estilos para a data. Procure por:


h2.date-header {

E inclua os trechos definindo os estilos que você deseja.


h2.date-header {
color: /*coloque a cor de sua preferência*/
margin: /*defina um espaçamento se quiser*/
padding: /*defina um espaçamento se quiser*/
font-size: /*coloque o tamanho da fonte de sua preferência*/
}

Se você quiser, pode substituir:
h2.date-header
por:
.date-header

Se preferir você também pode adicionar estilos para que sejam aplicados a toda linha abaixo do titulo do post, basta acrescentar o seguinte trecho:


.post-header-line-1 {
color: /*coloque a cor de sua preferência*/
margin: /*defina um espaçamento que quiser*/
padding: /*defina um espaçamento que quiser*/
font-size: /*coloque o tamanho da fonte de sua preferência*/
}

Se quiser, leia outro artigo que trata sobre nome do autor do post, talvez você se interesse em saber como colocar o nome do autor do post na linha abaixo do título da postagem:
Nome do Autor do Post Abaixo do Titulo

Se sua intenção for Colocar a Data na linha do rodapé do post, recorte todo o trecho referente a data, conforme mostrado acima e cole ABAIXO da tag
<div class=’post-footer”>

ou se preferir cole ABAIXO de
post-footer-line post-footer-line-1

Você terá que testar para verificar qual dessas linhas será mais adequada a incorporação da data.
Recomendo que você leia o artigo:
Colocar a data da postagem na linha do Rodapé do post

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

31 Comentários

  1. antonio disse:

    Ficou duas datas, como tiro a primeira a acima do post?

  2. Oi!
    Eu coloquei a data abaixo do título, mas não gostei e agora não sei como fazer para reverter o processo.
    Quero colocar a data acima do título, mas não sei onde inserir o código.

    Abraços 🙂

  3. Diego Martins disse:

    Esse estilo só tem para WordPress né?

  4. Diego Martins disse:

    Que sistema de comentários é esse?

  5. NAeL M. disse:

    Olá Clau!
    Consegui deixar abaicho do titulo, mas, Como deixo alinhado a direita?

  6. Colgate 360 disse:

    como eu faco pra colocar o nome do autor em baixo do corpo da postagem?

  7. Larissa Coelho disse:

    oi clau amooo o seu blog me ajuda muito!

    Eu queria saber como fazer para colocar a hora da postagem abaixo do titulo também.

    obrigada

  8. Coisas da Márcia disse:

    Olá Clau!!!
    Amo seus tutoriais, e sua dedicação por nos ajudar. Muito obrigada!!!

    Vim pedir um favor, no meu caso, eu tenho um template free, mas quero tirar a data que fica em baixo do título do post e colocá-la abaixo da postagem. (padrão).
    Segui o seu tutorial ao contrário para ver se consegui, mas o que está impedindo, é que eu tenho a data com formato de calendário, e o código muda… poderia me ajudar?!

    Obrigada!
    Beijos

  9. .:: Clau ::. disse:

    Gislaine
    Lamento,mas não tenho como te ajudar.

  10. Gislaine disse:

    Oi Clau!
    Olha, preciso muito, muito da sua ajuda!
    Em meu blog, uso o template Minima. Eu fui tentar colocar a data abaixo do título da postagem, como você disse, e por um lado até que deu certo. As datas apareciam embaixo do título da postagem.
    Porém elas também aparecem em cima do título!
    Aí eu tentei concertar a burrada que tinha feito, já que sem querer salvei, mas não sabia onde tinha que colocar o código pra tudo voltar ao normal…
    Depois de passar muita raiva, não sei como, mas tirei a data do post. Assim tá ótimo pra mim, mas tem uma linha que persiste em ficar, que é onde informam as tags do post. Queria saber se tem como tirar essa linha que fala os marcadores…
    Não sei se eu expliquei bem, qualquer coisa, dá uma olhadinha lá no meu blog…
    Abraços,
    Gislaine

  11. .:: Clau ::. disse:

    Natália
    é só colocar todos os códigos (autor e data) na mesma linha. Dentro do trecho .post-header-line-1

  12. Natália disse:

    Clau… Depois que inseri os "Artigos Relacionados" e ficar meio encima do "postado por:, resolvi mudar o autor e a data para embaixo do título da postagem, porém não consigo alinhar na mesma linha.
    Você já respondeu o Will, mas como colocar na mesma linha?

  13. johnathan kennedy (: disse:

    thanks Clau, resolveu o meu problema 😀

  14. .:: Clau ::. disse:

    johnathan kennedy
    Dá uma lida neste artigo:
    Mostrar a data nos posts de um mesmo dia

  15. johnathan kennedy (: disse:

    saberia me dizer o pqe so ficou no primeiro post?
    nos outros nao tem a data :l

  16. .:: Clau ::. disse:

    Will
    É só colocar o código referente ao autor do post e o da data na mesma linha.

    Leonardo
    Nos modelos padrões do blogger a data vem acima do titulo. Sugiro que vc dê uma fuçada no código destes modelos para ver como está e tente aplicar no seu template.

  17. Leonardo disse:

    Oi, e pra colocar a data acima?..estou colocando aquele calendario ao lado do titulo e meu modelo ja veio abaixo..montei o calendário certinho, so falta coloca-lo ao lado do titulo…

  18. Will disse:

    Clau,

    eu já adicionei o nome do autor abaixo do título conforme a postagem mencionada no post, mas eu queria que ficasse assim:

    Postado por: Will em 22 de Dezembro de 2010

    Igual o seu, rs

    #comofas?

    Beijos e obrigado 🙂

  19. .:: Clau ::. disse:

    Fabiano Roberto
    Neste blog tem mais de 30 páginas plagiadas do meu blog. Já denunciei todas!! Se o Blogger não excluir isso logo, tomarei outras providências mais rídidas! Esse blog é todo "clonado", tem um monte de artigos seus e meus que foram plagiados, e ainda usa um template da Juliana e retirou os créditos…
    esse povo não aprende nunca, parece que a gente tem que tomar atitudes mais drásticas para ver se aprendem, né?
    Obrigada pelo aviso querido…abraços 😉

  20. Fabiano Roberto disse:

    estou denunciando varias paginas de plagio de um blog e achei uma pagina sua lá

    http://turmadobug.blogspot.com/2010/12/data-das-postagens-abaixo-do-titulo-do.html

  21. Mah.... disse:

    Olá, funcionou direitinho comigo, a única diferença foi essa aqui:
    "Recorte todo o trecho referente a data, conforme mostrado acima e cole ABAIXO da tag (…)

    Observação 1: Geralmente a tag (…)está fechada com uma barra inclinada no final dela " />".
    É necessário retirar essa barra e fechar a tag após a inclusão do novo elemento. para fechar, use (…) no final do código."

    No meu só dá certo se deixar a barra. hsuahsuahsuas Estranho né? Mas deu certo! Obrigada

  22. .:: Clau ::. disse:

    blogattao
    Se não tem esse trecho, vc pode incluir ele no seu template para poder aplicar os estilos que quiser à data.
    Basta copiar o trecho de código de substituição q tá no tutorial
    .post-header-line-1 {

    nesta parte vc pode estipular um valor para espaçamento entre a data e o conteúdo do post.
    Experimenta estipular: margin-bottom: 10px;

  23. blogattao disse:

    O seu blog é muito bom, estou fazendo o meu todo por ele…
    estou com uma dúvida..

    eu coloquei a data embaixo do título, mais ela fica grudada no post, se eu colocar uma imagem, ela fica bem emcima da imagem, não embaixo do titulo…
    o meu blog não tem o

    h2.date-header {

    só o .data{ mas ele não funciona…
    tem como você me ajudar?

    desde já grato

  24. ::Clau:: disse:

    @Carlos-Kun:
    Já tem um tutorial, dá uma lida:
    Nome do Autor do Post Abaixo do Titulo

  25. Carlos-kun disse:

    tem como ensinar a fazer isso com o autor do post?

  26. ::Clau:: disse:

    @Ronaldo Pereira Borges:
    Eu quem agradeço pelo comentário, e fico feliz me saber que atingi meu objetivo, que é poder ensinar a todos como encrementar seus blog.
    Agora que já conheceu o blog e já aprendeu o caminho, volte sempre que precisar mesmo viu?

  27. Ronaldo Pereira Borges disse:

    Nossa senhora.. como é que não encontrei seu site antes?! Parabéns.. seus posts são todos muito bem explicado..

    Sei site vai complementar os pequenos detalhes que tenho para fazer no meu..

    Ganhou mais um leitor assíduo!

  28. ::Clau:: disse:

    @Jun:
    Dá uma lida neste post aqui:
    Elementos básicos das postagens. Lá vc vai ver como retirar isso que vc quer.
    Obrigada pela visita e volte sempre.

  29. Jun disse:

    Consegui! *-*

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.