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

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.

Aprenda aqui, com essa vídeo-aula, como realizar o backup

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:

 <data:post.dateHeader/>

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