Personalizando a Data/Calendário do Seu Post

CLASSIFICAÇÃO DO TUTORIAL
INTERMEDIÁRIO

Para você entender o que significam vários termos dos códigos CSS do blogger dê uma olhada na seção Códigos Básicos do blog Cria e Recria da Rô, lá tem várias explicações muito boas e didáticas.

O primeiro passo para fazer funcionar as suas configurações é apagar a linha
<link href='http://bloggerbuster.com/calendar.css' rel='stylesheet' type='text/css'/> do código anterior no tutorial, senão suas configurações não vão aparecer, vão prevalecer as configurações originais.

Vamos ao código:

/*-------Calendário do Post------*/
span.cal {
background:transparent url('imagem do seu calendário') no-repeat scroll 0%;
float:left;→ Se quiser que sua imagem fique à direita substitua left por right.
margin-right: 10px;→ Se sua imagem for flutuar à direita Substitua right por left.
height:36px;
width:35px;
font-family:"Helvetica",Tahoma,Arial;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
}

Para colocar uma imagem diferente na folha do seu calendário você pode usar alguns dos ícones abaixo. Baixe as imagens, salve em seu computador e hospede em algum site de hospedagem,(Veja acima no ítem DICAS vários sites de hospedagem.) aí substitua onde está indicado 'imagem do seu calendário' pelo endereço da sua imagem.
Atenção: Saiba as dimensões da sua imagem e ajuste as linhas height:36px;
width:35px; para dimensões que caibam sua imagem.

Clique neste LINK para os Ícones.

span.cal_month {
color:#FFFFFF; → Esta é a cor da letra do mês, ajuste-a de acordo com imagem de fundo.
display:block;
font-size:10px;→ Tamanho da letra que também deve ser ajustada de acordo com a imagem de fundo.
line-height:11px;
margin-left:1px;
padding-top:1px;
text-align:center;
text-transform:uppercase;
}
span.cal_day {
color:#999999;→ Esta é a cor da letra do dia, ajuste-a de acordo com imagem de fundo.
display:block;
font-size:18px;→ Tamanho da letra que também deve ser ajustada de acordo com a imagem de fundo.
line-height:18px;
margin-left:1px;→ Margem da esquerda que deve ser ajustada de acordo com a imagem de fundo.
padding-top:4px;
text-align:center;
text-transform:uppercase;
}
.sidebar {
margin-bottom: 20px;

Diferença entre margin e padding:Margin determina a distância de um elemento para outro no template, por exemplo, a distância entre uma coluna e outra.
Padding dá um espaço entre o conteúdo deste elemento para as bordas.Fonte: Templates para Novo Blogger
Se tiver dúvidas clique no link da frase que você entenderá melhor esta explicação.

Caso algo fique desalinhado vá testando clicando em visualizar antes de salvar até que fique do seu jeito.