Data dos posts do blog em formato calendário (com imagens grátis para você!)

em 4 de abril de 2013


Sempre me pedem pra ensinar como eu coloco a data na maioria dos blogs que personalizo.
Há 3 maneiras diferentes, vou ensinar a mais segura, que não dá erro em nenhum template e em nenhum navegador.
Não é difícil, mas é preciso atenção, tá?

Antes de começar leia o artigo atentamente para ter certeza de haver compreendido.
A seguir faça um backup de seu blog.


Caso algo dê errado é só reinserir seu template original e tudo volta a ser como antes.
Outra dica que dou é fazer qualquer modificação em um blog de testes antes de mexer em seu blog "oficial".
Precauções tomadas, vamos ao tutorial?

Acesse o painel de seu blog e clique na aba Layout. Clique em Editar abaixo de Postagens do blog e configure a data para o formato conforme a imagem abaixo:


 Salve a alteração.

Agora vamos aos códigos: abra a página onde eles estão, deixe-a aberta e vá ao painel de seu blog.


Copiar os códigos


Agora acesse a aba  Modelo. Escolha Editar HTML e dentro da caixa de códigos tecle Ctrl+F.
Na barra de busca digite </head> e tecle Enter para localizar.
E abaixo dela cole o primeiro código.
A seguir visualize para ter certeza de que está tudo indo bem. Agora localize este trecho:



Atenção!
Você encontrará 2 vezes esse trecho. Ignore a primeira ocorrência dele e quando achar a segunda ocorrência SUBSTITUA-O pelo segundo código.

Preste atenção, tá? Substitua apenas a linha que pedi para localizar; ficará assim:

  <h2 class='date-header'><span>
<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');
</script>
</div>
</span></h2>

Visualize novamente. você verá que a data está em formato calendário.
Agora salve as alterações.

Vamos então modificar a aparência da data, dar cor, colocar uma imagem fofa, etc.
Para fazer isso localize a tag ]]></b:skin>
E acima dela cole o código CSS.
 
Vá mexendo e alterando conforme necessário, até que fique bem alinhado.
Quando estiver como deseja clique em Salvar alterações.


Algumas dicas extras:

Coloque exatamente a largura e a altura da imagem que usar nos campos:
width:80px; /*Largura da imagem*/
height:80px; /*Altura da imagem*/
Assim a imagem e o texto ficam alinhados corretamente.

Caso não queira usar uma imagem e sim uma cor de fundo troque
 background: url('AQUI O ENDEREÇO DE SUA IMAGEM') no-repeat;
por
 background: #000000 repeat;
Sendo que o código hexadecimal #000000 se refere à cor preta. Troque pelo código da cor que desejar.
Aqui tem uma tabela de cores completa.

Se quiser arredonde o fundo de sua data.
Basta acrescentar isso abaixo da linha que define a cor de fundo:
 border-radius: 10px;
Quanto maior o número mais arredondado fica.


 Presentes para você!

Abaixo separei algumas imagens do meu arquivo para você usar.
Todas estão em .png transparente.
Para usar salve-as em seu pc, *hospede a que desejar e insira o endereço dela no local indicado no código.




























*Como hospedar uma imagem usando o próprio Blogger?

Faça assim:
Crie uma postagem 'falsa', que nunca será publicada, ficando sempre no rascunho.
Insira nela a imagem que deseja hospedar. Depois de concluir o upload da imagem clique sobre ela e com o botão direito do mouse copie o endereço, url ou link da imagem (o nome dependerá de qual navegador esteja usando); este é o endereço web de sua imagem.
Para saber o tamanho exato da imagem  abra a pasta onde a salvou, pare o mouse sobre ela e o tamanho aparecerá.

Conheça a web-série Como personalizar o blog

  1. Como criar um blog: criação da conta Google e criação do blog
  2. Trocar o plano de fundo do blog e alterar largura e disposição das colunas
  3. Centralizar o nome do blog, os títulos dos posts e dos elementos de página (gadgets);
  4. Alterar cores e fontes dos títulos e do texto (fontes especiais, manuscritas, etc);
  5. Criar um menu com abas abaixo do cabeçalho e inserir links nele;
  6. Inserir assinatura personalizada;
  7. Colocar Voltar ao topo com efeito deslizante;
  8. Personalizar os comentários do blog (numerar, separar, incluir opção Responder, etc)
  9. Data dos posts em formato calendário
  10. Número de comentários dentro de um balão  




Gostou?
Deu um trabalhão, mas promessa é dívida.
Compartilha?
Eu fico gradecida rsrsrsrs

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

42 comentários , comente também!

  1. Caraca! Adorei muito! Vou colocar no Pinto assim que a Rafa deixar! Obrigada minha meta-blogueira-mestra-preferida!
    <3

    ResponderExcluir
  2. Que fofo!! Deu vontade de ter no meu blog :p
    Bjinhosss
    http://laialisafa.blogspot.com/

    ResponderExcluir
  3. Olá amiga! Vim fazer-lhe uma visitinha e deixar meu carinho.
    Obrigada por compartilhar seu conhecimento.
    Tenha uma boa semana!
    Beijokas
    Oli
    http://oliceia.blogspot.com.br

    ResponderExcluir
  4. Maravilha de presente heimmm .
    Beijos querida .

    ResponderExcluir
  5. Aí, como gostaria de ter paciência, sabedoria para tentar fazer estas receitinhas tão bem explicadinhas. O PC não gosta de mim e eu tão pouco dele...vivemos em guerra permanente. Ainda bem que temos vc para nos salvar dessa tarefa para para muitos é simples e para outros é bastante complexa.
    Bjus e parabéns pela paciência e presteza em ensinar tanta gente.

    ResponderExcluir
  6. que legal, vou colocar no meu blog!!!
    adorei!

    te segui aqui, viu?!
    beijinhos
    http://weddinginsummer.blogspot.com/

    ResponderExcluir
  7. ola adoro seu blog suas postagem

    segue tbm *-* ?
    http://meubebepropaganda.blogspot.com.br/

    ResponderExcluir
  8. Fiz ontem isso no meu blog! Sintoniaaaaa...
    Mas lembra aí que tem que configurar a data lá no painel tbm, viu? Esqueci de fazer isso ontem e me deu nos nervos, e olhe q já sabia disso. Aff...
    Te adoro! Beijo...

    ResponderExcluir
  9. Elaine, segui os passos, mas não consegui. No meu blog a linha: , repete 3 vezes, fiz um teste com cada uma das linhas, com a primeira e a ultima a data some, e com a segunda a data fica igual está hoje. Adorei a dica e há muito venho querendo alterar a data, o que será que eu fiz de errado?

    Bjs.

    ResponderExcluir
  10. Oi Elaine, excelentes dicas como sempre! A que vc colocou no meu blog gosto muito! Aliás, gosto de td que vc colocou no meu blog, trabalho nota mil! :))
    Ah! E não tenho coragem pra ficar mexendo assim não! rs. Essa parte deixo pra vc!
    Tenha um lindo dia! :))
    Bjssss
    viveraprendendo.com

    ResponderExcluir
  11. Oi Elaine!
    Vim te convidar para o sorteio de aniversário do meu blog, o Perfeita Ordem.
    O prêmio é um vale presente no valor de R$150,00 da Boutique de Achados.
    Passa lá!
    Vou adorar te ver na minha festa!
    http://www.perfeitaordem.com/2013/04/sorteio-de-vale-presente-no-valor-de.html
    Beijo.

    ResponderExcluir
  12. OLá Elaine
    Obrigada pelas dicas e presente.

    bjs
    Paty

    ResponderExcluir
  13. Linda eu queria que você fizesse minha assinatura para o meu blog Graças Fernandes e flor.
    Me Blog é artegracy e email gracasfernandes1@yahoo.com.br.
    Fique com Deus
    Beijo

    ResponderExcluir
  14. Oii Elaine Parabéns seu blog é um sucesso, e sempre me ajuda com as suas dicas, quando to no sufoco no meu blog o Um Pouco de Mim me socorre. Eu criei um Memes e tem um pra vc no meu blog, http://coisasdecheinha.blogspot.com.br/; espero que goste. Bjs

    ResponderExcluir
  15. Oi Elaine!

    Adoro suas dicas e já usei algumas em meu blog!

    Estou tentando colocar essa em prática mas não consigo copiar o codigo... Ele não fica selecionado...
    É algum tipo de proteção? Ou meu mouse que esta ruim mesmo? hehehe
    Beijokas e Parabens!

    Olha meu blog: aestranhaestantedagi.blogspot.com.br
    Coloquei aquele Voltar ao Topo! Ficou super fofo! ^_^

    ResponderExcluir
  16. Consegui copiar! hehehe faltava clicar nos botões do ladinho! hehehe

    Mas não encontrei os codigos Dada..... e Skin....

    Não deu certo.... =(

    Vou tentar algum outro! \o/

    Beijokas!

    ResponderExcluir
  17. eu não conseguir, eu procurei esse trecho:
    mais não tem, mim ajude por favor, meu blog: http://mocidade-k.blogspot.com.br/

    ResponderExcluir
  18. Nossa já tentei muitas vezes trocar a data pelo formato calendário,fiz do jeito que você ensino mas,na hora que vou visualizar a data desaparece do blog,não estou intendendo o porque,me ajude por favor.
    Aguardo resposta.

    ResponderExcluir
    Respostas
    1. Comigo simplesmente não acontece nada, não encontrei a caixinha para expandir widgets

      Excluir
  19. Não deu! Tentei de todas as formas possíveis, mas nada de funcionar. Até apareceu a imagem, mas a data não. Que pena pra mim, todas as dicas desse site deram certo, só essa que não. Os códigos estão certos mesmos? Alguém conseguiu fazê-lo? Obrigado!

    ResponderExcluir
  20. Caraca! sou sua fã! vou fazer depois conto o que deu!!!!

    http://escrev-arte.blogspot.com.br

    ResponderExcluir
  21. Nao consegiu fazer!
    Que pena achei super legal!
    http://carolsucupira.blogspot.com.br/

    ResponderExcluir
  22. Olá Elaine, não sei o que acontece mas não consegui, fiz exatamente como você explicou. A figura aparece só que a data não aparece, o coloquei o formato da data como você explicou.

    ResponderExcluir
  23. Poxa vida não consegui...
    Tentei tanto!! :(
    Mais valeu mesmo assim
    Beijos
    http://meigamakeup.blogspot.com.br/

    ResponderExcluir
  24. aaain, eu coloco lá na barrinha pra procurar tal coisas, nunca acha :( magoada viu

    ResponderExcluir
    Respostas
    1. Emily, você teclou Enter para localizar?
      Todo template tem esse código...

      Excluir
  25. gostei mais não consegui colocar

    http://cosmeticosbons.blogspot.com.br/

    ResponderExcluir
  26. Oooi , só hoje já usei três tutos seus para personalizar meu blog ! Obrigado !

    http://princesadosalvador100.blogspot.com.br/

    ResponderExcluir
  27. Elaine, fiz no meu e deu certo! Mas eu gostaria que aparecesse a data em todas as postagens, como podemos repetir? Obrigada!

    ResponderExcluir
  28. Amiga não consigo achar o (EXPANDIR MODELO DE WIDGETS) Poderia me ajudar? grata!

    ResponderExcluir
  29. Ficou tido muito bom, o prolema é que não quer aparecer a data, o que eu faço??

    ResponderExcluir
  30. Eu amei e conseguir colocar mas eu não conseguir alinha a data, eu tentei varias vezes mas tá difícil alguém pode me ajudar? Elaine sempre to aqui no seu blog e adoro todas suas postagem sempre bom aprender mais um pouco com você.

    ResponderExcluir
  31. Olá Elaine.
    Estou tentando instalar no meu blog mais só da erro.
    Já tentei de varias formas e não dá certo.. :(
    Pode me ajudar por favor!
    Fico agradecida

    ResponderExcluir
    Respostas
    1. Lilyan, releia o tutorial, veja se não pulou nada, se encontrou os códigos certos, etc...

      Excluir
  32. onde tem isto: line-height:18px; /*Altura da Linha*/
    eu faço o que? apago o /*Altura da Linha*/ e deixo só line-height:18px é?

    ResponderExcluir
  33. Parabéns pelo Blog. Gostei muito do Tutorial, só que quando eu altero, o Título da Postagem não fica ao lado da imagem, fica embaixo, como faço para alterar? Para ficar ao lado da data.

    ResponderExcluir
  34. meu título da postagem ficou embaixo da data, como faço para ficar ao lado?

    ResponderExcluir
  35. Elaine, segui os passos do tutorial e não consegui deixar como queria, a data não aparecia apenas o formato. Fiz uma busca pela internet e encontrei outro bem similar, decidi então misturar os códigos e por fim deu tudo certo!

    ResponderExcluir
  36. Olá Eliane, fiz tudo certinho. Unico problema que não consegui encontrar essa caixinha que vc pede pra marcar: expadir widgets. Pode me ajudar?

    ResponderExcluir
  37. Elaine, não dá para copiar os códigos nem as imagens! O teu site tá bloqueado para copiar, logo não dá para fazer o que ensinas aqui no teu site!

    ResponderExcluir
  38. Oiii Elaine parabens... suas dicas sao dez... mas eu nao estou conseguindo colocar no blog pq os codigos estao passando das laterais e ai nao da pra ver o codigo todo... e nao tem como copiar para colocar no blog..
    vc poderia me dizer como faço pra ver o codigo inteiro.. para eu poder colocar no meu blog...
    obrigada desde de ja
    e mais uma vez parabens....

    ResponderExcluir
  39. Olá eu não consigo copiar os códigos !
    o que eu faço?

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…