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

Postagens Vanessa S.

Data da Postagem no Rodapé do Post no Blogger

Nos templates padrões do Blogger(Designer de Modelo e Minima), a data dos posts aparecem sempre na linha acima dos títulos das postagens.

Data padrão do Blogger

Eu já mostrei como configurar a data das postagens, colocando-a na linha abaixo do titulo do post, no artigo:
Colocar a data abaixo do título do post

Se você quiser Colocar a Data das Postagens na linha do rodapé do post, ao lado do nome do autor, conforme a imagem demonstrativa abaixo, terá que fazer algumas modificações no código do seu template.
Data abaixo do Título do Post

[becape]Lembrando que: Antes de qualquer modificação, é sempre bom fazer um backup do seu Template para evitar transtornos.[/becape]

Colocar a Data da postagem do Blogger na linha do Rodapé do post:

Vamos localizar o trecho do código referente a data dos posts no template.
Acesse o painel do blogger e clique no menu “modelo >> Editar HTML” e marque a caixinha “Expandir modelos de widgets”, e procure por este código:


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

Dica: Se tiver dificuldades para localizar o código completo, utilize ctrl+f e tente localizar a 1º linha do código.

SUBSTITUA TODO o código acima por este aqui:


<b:if cond='data:post.dateHeader'>
<span class='date-header'><data:post.dateHeader/></span>
<script>var lastDate= '<data:post.dateHeader/>';</script>
<b:else/> 
<span class='date-header'><data:post.dateHeader/>
<script>document.write(lastDate);</script> 
</span>
        </b:if>

SALVE!

Agora você deverá COPIAR TODO O CÓDIGO que você acabou de alterar e deverá:
1) Salvá-lo no bloco de notas
2) Apagar ele do seu template.

Retorne no modo “editar html” do seu template e agora procure por:


<span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
                <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                  <span itemprop='name'><data:post.author/></span>
                </a>
              </span>
            <b:else/>
              <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                <span itemprop='name'><data:post.author/></span>
              </span>
            </b:if>
        </b:if>
      </span>

E cole logo ABAIXO deste trecho o código que você copiou no bloco de notas.
Visualize, e se estiver tudo certo, salve!
 

Após modificar o código, você pode aplicar estilos para a data. Procure epal tag ]]></b:skin>
E cole logo ACIMA dela, o código a seguir, incluindo os trechos definindo os estilos que você deseja.


.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*/
}

[alerta]ATENÇÃO:
Antes que me perguntem: Os códigos postados neste tutorial, foram retirados do Template padrões do Blogger (Designer de Modelo e Minima).
Nos templates padrões do Blogger, tanto os modelos Minima, quanto os Designer de Modelo, todo trecho referente a data dos posts, se apresentam desta maneira.
Dependendo do modelo de template que você usa, se ele já sofreu muitas modificações, pode ser que este trecho se apresente de outra maneira, portanto é bem capaz que este hack não funcione para alguns casos.
Caso não dê certo no seu blog, pode ter certeza que seu template já sofreu bastante modificação e infelizmente a sua única solução é: tentar encontrar trechos ao menos parecidos e testar![/alerta]

Artigo atualizado em janeiro/2013.

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.

18 Comentários

  1. Kyo disse:

    nem deu certo

  2. GG disse:

    Olá, como faço pra colocar um icone do lado da data do post?

  3. Frida Lucia disse:

    Oi Clau,

    Já fiz ficou bem legal, gosto muito dos seus tutoriais, no inicio achava complicado, mas fui estudando melhor os posts e eles são bem explicados, tem me ajudado muito.

    Passa lá no blog e registra a tua visita, ficarei honrada.

    Muito obrigada por partilhar os teus conhecimentos.
    Bjs, Frida Lucia

  4. bruna disse:

    Queria saber como faz pro número de comentario ficar no rodapé, ja perquisei bastante e não achei nenhum tutorial. O numero de comentario fica “flutuando” ao lado do post e na direita, ja tentei botar no rodapé, ja exclui varios cod e nao adiantou nada. Me ajudeeem, por favor (?) / n ignorem nao

    • Vanessa disse:

      Lamento, mas eu não tenho como te ajudar, pois deve ser algo relacionado ao seu template e para tentar descobrir, teria que ser feita uma análise mais minuciosa, e infelizmente eu não disponho de tempo para isso. De qualquer forma, agradeço pelo comentário.

  5. Pandora disse:

    Poxa, mais uma vez vc arrasou! Pra quem não entende nada de html fica super fácil seguindo suas dicas! Deu certinho colocar a data no rodapé, agora eu estou querendo colocar uma imagem entre o autor da postagem e a data, pra separar um pouco pq ficou muito junto… pode ser tipo no exemplo que vc deu no início desse post, que tem uns pontinhos antes e depois do seu nome… vc tem algum tutorial? Bjão

  6. Lay costa disse:

    ñ sei pq mas toda alteração q faço na área de postagem ñ é renderizada, é como se eu ñ tivesse feito nada, e isso acontece muito comigo, ñ só na área de postagens como em outros elementos. isso já aconteceu com vc, Clau?

    • Tatiana disse:

      Também estava com esse problema. Depois descobri que eu tinha que alterar em 2 lugares. Não sei por qual motivo. Se eu não alterasse nos dois locais, não aplicava as mudanças. Estranho, né?

  7. .:: Clau ::. disse:

    adm – Lsp??s
    Que bom que conseguiu, pois eu estou de ferias e ando sem tempo para responder a todos os comentarios.

  8. adm - Lsp??s disse:

    uoe Clau, valeu por responder mais eu já conssegui sozinho ^^

  9. adm - Lsp??s disse:

    Oi Clau,

    Tipo eu queria saber como eu coloco o número de comentários no rodapé do post, tipo os meus estão na parte de cima e na direita, eu queria na parte de baixo do post!

  10. Sites Relacionamentos Online disse:

    Gostei dessa dica. Não sabia que podia alterar!

  11. Kevvin Oliveira disse:

    Nossa Clau! Você respondeu a uma dúvida que eu sempre quis modificar nos templates do Blogger. Parabéns pelo post =)

  12. mundodadanca1 disse:

    Olá Clau

    Essa postagem vai ser de grande valor para mim. Porque andei colocando algumas coisas no cabeçalho das minhas postagens e esse recurso vai me ajudar a limpar um pouco o visual do meu layout.

    Mais uma vez obrigado pelos ensinamentos.
    Caminhando, em rumo ao profissionalismo. Graças a pessoas como você.

    Abraço e Sucesso!
    Roger Dance

  13. .:: Clau ::. disse:

    Max
    Eu que atualizei o post incluindo a informação, depois q vc deixou o comentário perguntando como aplicar estilos a data. Assim ajuda outros leitores tb. =)
    Abraços 😉

  14. Max Martins disse:

    Oi, Clau

    O texto foi atualizado ou eu deixei passar essa informação? Como eu fiz isso? rs

    De qualquer forma, obrigado pela atenção. Já arrumei como eu queria.

    Abraços

  15. .:: Clau ::. disse:

    Max
    Tem sim. Eu já inclui esta informação no post.
    Obrigada pelo comentário.

  16. Max Martins disse:

    Oi, Clau

    Já faz um tempo que quero fazer isso. Gostei muito da dica. Inclusive, já testei e está em pleno funcionamento.

    Ainda não pesquisei aqui no MB, mas gostaria de destacar a data com outra cor. Tem como fazer?

    Abraços

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