Mudar Lugar da Data da Postagem - Achar Códigos HTML no Blogger

Alguns leitores do nosso blog perguntaram como alterar o lugar onde aparece a data da postagem que em muitos templates fica acima do titulo da postagem, isso pode ser feito pela pagina editar HTML, apenas precisamos ter o cuidado na hora de alterar os códigos, por isso é recomendável fazer um backup do seu template antes de mexer nesta pagina.

Mas temos um problema que é como achar o código no HTML e como saber qual dos códigos é o certo, isto é aquele que desejamos modificar, mas para resolver isso tem um teste bem simples de fazer na pagina do HTML do blogger, apenas coloque algumas letras repetidas no local que você imagina ser o correto e clique para visualizar o blog. Vamos demonstrar isso enquanto falamos sobre como mudar a posição da data do post no seu blogspot.

Entre na pagina editar HTML, marque para expandir o modelo de widgets e procure por: <data:post.dateHeader/> (use o ctrl+F) você encontrará vários então altere colocando um sinal (letras) para testar desta forma:

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

E clique para visualizar o blog se for o local correto a data do seu blog aparecerá com as letras "aaaaaaaaa" junto com a data de cada post e com a mesma formatação dela.

codigo html da data da postagem do blog
Então somente apague as letras e saberá que esse é o trecho do código HTML que procura. Essa dica é um truque para achar código HTML que funciona e ajuda muito na hora de alterar códigos HTML.

O código completo da data da postagem do blogger é esse:

<b:if cond='data:post.isDateStart'>
&lt;div class=&quot;date-outer&quot;&gt;
</b:if>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<b:if cond='data:post.isDateStart'>
&lt;div class=&quot;date-posts&quot;&gt;
</b:if>

Agora que achamos o trecho com a data da postagem é só copiar o trecho que mostramos acima e trocar de lugar, procure por um destes trechos e cole o código logo depois de um deles, dependendo de onde queira a data dos posts:

<div class='post-header-line-1'/> embaixo do título da postagem
<div class='post-footer-line post-footer-line-1'> após o texto do post (próximo aos comentários)

mudar lugar da data do post do blogger
Sobre editar o html do blog leia também:

Porque os códigos não funcionam no blog
Erros no Blogger - Códigos Duplicados
Limpar Histórico de Internet - Evite erro no Blog

Clique para visualizar o blog e se pareceu do jeito que você quer clique para salvar as alterações. Mas lembre-se que em caso de algum problema poderá voltar ao seu template normal caso tenha feito o backup que falamos no inicio deste tutorial.

66 comentários :

  1. não mudei a data da minha postagem de lugar, alias nem mostro a data, mas gostei muito da idéia de colocar letras para achar o lugar certo no html

    ResponderExcluir
  2. Gostei muito da idéia, mas, por enquanto, estou meio tímida para alçar voos mais altos, fazendo modificações. Suas dicas são excelentes.

    ResponderExcluir
  3. não tá dando certo D:
    já usei muitas dicas daqui, mas essa eu não consigo fazer funcionar, mas vou dar um jeito ^^

    ResponderExcluir
  4. É EU ACHO QUE NÃO COLOQUEI MESMO A DATA NÃO PENSEI QUE PRECISA-SE, MUITO BOA A IDÉIA SIM OBRIGADO

    ResponderExcluir
  5. No meu eu coloquei [a algum tempo], junto ao titulo e fico bom.
    olha: http://naruto-9tails.blogspot.com/

    ResponderExcluir
  6. Existe algúm site que auxilia na criação de um template.

    ResponderExcluir
  7. Portal Mangaká
    tem muitos sites com templates prontos para download, onde é só baixar e instalar no seu blog, mas não sei qual recomendar pois nunca usei.

    se for fazer isso salve uma cópia do seu template atual, pois se tiver problemas poderá voltar ao modelo atual.

    ResponderExcluir
  8. Oi, será que tem como por uma playlist personalizada de modo que eu possa enviar minhas próprias músicas do PC, em uma postagem?

    ResponderExcluir
  9. Anônimo
    Para colocar musicas no blog você precisa hospedar os arquivos em algum site...

    já publicamos alguns tutoriais sobre musica e lá achará dicas de sites de hospedagem:

    Sites com musicas para colocar no Blog

    Qual o melhor site de música para colocar no blog - enquete

    ResponderExcluir
  10. como eu adiciono marcadores no rodapé do blogger ?
    só que sem adicionar pelo postagens no blog!
    porque não ta indo no meu template
    entaum quero adicionar no html do template

    ResponderExcluir
  11. Bmviicio | Play Team
    o gadget dos marcadores é igual a qualquer outro é só arrastar até o rodapé

    ResponderExcluir
  12. fabiano sou eu Bmviicio | Play Team;
    quando eu disse marcadores eu me referia a isso aqui http://i.imgur.com/kWVlI.png, igual ao q voçe usa, só muda o nome, no meu template nao da para adicionar por postagens do blog porque meu template ja esta bastante alterado

    como faço agora para adicionar de outra forma

    ResponderExcluir
  13. isso é a formatação dos marcadores, tente alterar o estilo:

    .label-post{font-size:120%}

    o valor é só um exemplo

    ResponderExcluir
  14. Oi,achei muito legal isso *-*
    Mais queria saber como mudar o nome do autor para baixo do titulo da postagem.Sabe aquele ''Postado por...''então,quero mudar ele de lugar,me ajuda?

    ResponderExcluir
  15. no código html do blogger o nome do autor fica logo depois de span class='post-author vcard', mas são códigos do blogger, então pode trocar de lugar se quiser

    ResponderExcluir
  16. mais olha só,eu cloquei depois do titulo da postagem,mais fico o data em cima e embaixo da postagem!

    ResponderExcluir
  17. olha só eu coloquei eu coloquei o troço depois do titulo,mais meus gadget inves de ficar na lateral >>
    que é o oficial ele fico tudo embaixo das postagens e não voltou mais,o que eu faço?

    exluo o código que vc deu?

    ResponderExcluir
  18. pode tentar retirar o código mas salve um cópia do template antes, assim se tiver problemas poderá voltar ao modelo atual

    ResponderExcluir
  19. Eu Não Conseguir =/
    Da Para Explicar Melhor?
    Tipo.. Onde Eu Coloco? Substituo Aonde?

    ResponderExcluir
  20. Aaaa Conseguir \õ/ Depois Que Entendi Como Era ^^ Obrigado Dicas Para Blogs ;D

    ResponderExcluir
  21. Miyamoto
    mexer com esses códigos é complicado mesmo... porque os templates variam muito

    ResponderExcluir
  22. Fabiano ! em outra ostagem mas recente sua eu perguntei se retirar o atribuiton dá punição ou não ,eu descobri que não , mas outra pessoa pode arranjar uma maneira de copiar meu modelo modificado por mim e sem o atribuiton ele ode não vai adiciona o credito do autor original , mas com atribuiton dá para excluir o credito , então eu vou retirar meu o atribuiton do meu blog , mas antes eu tenho que saber como no HTML do meu blog eu acho os codigos dos gadgets do blog , pode me ajudar ?

    ResponderExcluir
  23. Angelo e Qui
    desculpe, mas não posso ajudar a retirar o do criador do template (atribuiton)

    ResponderExcluir
  24. o que eu faço, o nome das minhas postagens não aparecem no blogger.

    olha só: http://historiasepensamento.blogspot.com/

    ResponderExcluir
  25. Muito obrigado pelas dicas,funcionou perfeitamente.

    ResponderExcluir
  26. Oi,você pode me ajudar?eu to precizando de alguem como você que ja sabe bastante em html,tipo:
    eu modifiquei meu site tudo certinho,mas tem uma coisa erra e precizo editalo na cor do meu texto,ele ta branco e quase neem da para ver >>olha eu sei que você não vai publicar meu comentario,mas porfavor me ajuda http://csjogosedicas.blogspot.com,eu não to divulgano ele entra nele e me ajuda para editar as cores do meu menu,da barra esquerda e da direita.ou me da uma dica pelo msn -->csjogosedicas.blogspot.com@gmail.com,precizo muito de você mesmo!

    ResponderExcluir
  27. anão deixe eu me viro melhor ai eu mesmo aprendo mas vlw,deleta o comentario :),espero num ter ficado bravo mesmo você falando oque num erra desculpa :(

    ResponderExcluir
  28. ok, é bom saber que conseguiu resolver

    ResponderExcluir
  29. Muito bom!Eu tinha tentado isso antes e não tinha conseguido,hoje eu prestei mais atenção e consegui!Olhe: http://babebliblog.blogspot.com/

    ResponderExcluir
  30. Olá!
    Primeiramente, quero parabenizar pelo blog e por me ajudar sempre que preciso.
    Bom como nada é um paraíso. eu também tive problemas. Eu troquei o meu templates e coloquei um novo -Obvio ¬¬' - e o que aconteceu, ao invés de sumir os widgets sumiu as páginas.
    Eu estou como um louco procurando alguma forma de voltar as páginas como no antigo templates. Poderia me ajudar com esse pequeno acidente?

    ResponderExcluir
  31. Fabiano eu gostaria de mudar o "Postado por" no final do post e colocar debaixo do título e eu consegui, mas ficou com a mesma fonte, tamanho e cor do texto da postagem além de ter ficado colado com o texto da postagem. Como modifico isso?

    ResponderExcluir
  32. NK Russell pode tentar criar o estilo

    .post-footer{margin-top:10px}

    na pagina editar html isso vai gerar um espaço antes do rodapé da postagem

    ResponderExcluir
  33. Fabiando, estou tentando fazer essa alteração mas quando recorto o código e colo no local indicado a data da postagem simplesmente some, não aparece após o título.
    Você tem alguma sugestão sobre o que eu estou fazendo errado?
    Uso o template do blogger no modelo Picture Window.

    ResponderExcluir
  34. em alguns templates existem varios códigos bem parecidos talvez seja o seu caso e você pode ter mexido no código errado.

    ResponderExcluir
  35. n estou conseguindo mudar o "postado por" nem os comentários de lugar, pode me ajudar? obrigada desde já. c:

    ResponderExcluir
  36. Anonimo na pagina layout clique para editar as postagens e encontrará como mudar esse texto

    ResponderExcluir
  37. Gostaria de uma maozinha sabe é que eu queria colocar a data em um ponto da imagem http://testprameublogbom.blogspot.com so que mesmo que essa dica funcione nao vai pro lugar certo será que nao daria pra usar padding. Se puder responda por favor.

    ResponderExcluir
  38. Hitsugaya Toushirou colocar data na imagem? isso tem que ser feito com um programa para editar imagens

    ResponderExcluir
  39. Boa tarde,tentei fazer o que vc postou para achar a data,mas nao acho,poderia me ajudar

    ResponderExcluir
  40. Estou tentando alinhar a data com o nome do autor e os comentários, só que sempre mecho em um o outro saí do lugar destinado. Como resolvo isto?

    ResponderExcluir
  41. provavelmente algum destes itens tem configuração de margin ou padding diferentes, veja aqui:
    Como Encontrar Erros nos Códigos

    lá você vê como usar seu navegador para encontrar trechos dos códigos

    ResponderExcluir
  42. Olá Fabiano, tudo bem?
    Estou tentando há dias colocar a data abaixo do título e o seu foi o mais completo que achei. Mas infelizmente, a data some e não dá certo. Localizei todos os códigos e refiz o procedimento várias vezes. Você tem como me ajudar?
    Um abraço,
    Zélia Dantas

    ResponderExcluir
    Respostas
    1. na pagina layout clique para editar as postagens e veja se está marcado para mostrar a data.

      Além disso, os códigos html variam um pouco conforme o template e por isso em alguns casos gera erro e não funciona.

      Excluir
  43. Tem Como colocar do Lado Titulo ?

    ResponderExcluir
    Respostas
    1. é possivel mudar o titulo de lado achando o código dele.

      normalmente é o estilo: .post-title a{ ou .post-title h3{

      pode variar um pouco, mas é só colocar o código de alinhamento por exemplo:
      text-align: center;

      para centralizar.

      Excluir
  44. Fabiano boa noite! Eu encontrei o trecho com a data da postagem segui o passo a passo,fiz e refiz várias vezes, simplesmente a data some não aparece de jeito nenhum,estou usando modelo mínima e tentando colocar a data abaixo do título da postagem,existe outra maneira de fazer isso?

    ResponderExcluir
  45. o código da data está na linha < h2 class="date-header" ..... < / h2 >


    e o código do titulo do post está em < h3 class="post-title entry-title ...... < / h3 >

    tente que colocar a linha com a data depois que fechar o h3 do titulo.

    ResponderExcluir
  46. Boa noite Fabiano.Já Fiz e novamente a data desaparece!

    ResponderExcluir
    Respostas
    1. deve ter um < / b:if > depois do h3 provavelmente ele faz o titulo aparecer de formas diferentes (com ou sem link) dependendo se está na pagina inicial ou na pagina da postagem.

      você deve ter colocado o código dentro deste < / b:if >, tente mudar o código um pouco mais para baixo no html.

      Excluir
  47. Boa noite!isso, lá esta dessa maneira depois do h3 termina com < / b:if >
    Já havia tentado colocar o código mais abaixo,e a data continua a desaparecer.

    ResponderExcluir
  48. Fabiano a única maneira que consegui foi colocando na caixa de CSS
    h2.date-header {
    text-align:center;
    margin-top: +50px;
    }
    h3.post-title {
    margin-top: -90px;
    }
    lá fica certinho a data foi para abaixo dos títulos das postagens,mais isso é correto,posso deixar esse código assim?

    ResponderExcluir
    Respostas
    1. qual o endereço do blog que está com este problema?

      Excluir
    2. Fabiano boa noite, é um blog de texte http://micarlatexte.blogspot.com.br/
      e quando coloco o código em lugar mais abaixo a data apareceu 2 vezes(em cima e abaixo do titulo)

      Excluir
    3. tente pegar o código da data e colocar dentro desta div

      < div class='post-header-line-1' >< /div >
      código da data
      < /div >

      talvez a data só apareça na pagina da postagem e não na pagina inicial do blog

      Excluir
  49. Oi Fabiano,boa noite.Já fiz isso e não acontece nada, a data fica no mesmo lugar e no meu essa linha tem uma barrinha no final
    post-header-line-1'/> que tirei quando coloquei o código da data e mesmo assim nada.

    ResponderExcluir
    Respostas
    1. tente excluir seu histórico de internet.
      seu computador pode estar usando o cache para mostrar o seu blog e por isso não aparece as alterações feitas.

      veja também se não tem duas vezes o código da data no seu blog. Pode ser que você esteja alterando o código que é usado somente na versão para celular do seu blog.

      em alguns templates o código aparece uma vez só, mas em alguns é separado a versão para computador e celular.

      Excluir
  50. A primeira vez aparece assim
    <b:if cond='data:post.dateHeader'>
    <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
    </b:if>

    E mais abaixo assim:

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

    ResponderExcluir
  51. o primeiro trecho é a data do post

    no seu html deve ter duas vezes a linha:
    < div class='post-header-line-1'/ >

    uma delas é para versão mobile e a outra para web. tente colocar o código abaixo delas.

    para ficar mais facil apenas escreva a palavra: teste abaixo da linha, salve e visualize o blog, se der certo copie o código da data.

    ResponderExcluir
  52. Oi Fabiano,boa noite!Eu fiz como falou e agora deu certo,a data ficou abaixo do titulo certinho.Ainda preciso de ajuda não estou conseguindo aplicar estilos a data

    ResponderExcluir
  53. tente criar o estilo:

    .date-header {.....}

    mas veja se já tem algo parecido no seu template porque se tiver duas vezes provavelmente dá erro

    ResponderExcluir
  54. Boa Noite Fabiano,então consegui.Muitíssimo obrigada por sua ajuda e paciência!

    ResponderExcluir
    Respostas
    1. é bom saber que deu certo....

      editar a aparência do blog tem mesmo muitos detalhes e as vezes é complicado mesmo achar o problema

      Excluir