Data do Post na Forma de Folha de Calendário

CLASSIFICAÇÃO DO TUTORIAL
INTERMEDIÁRIO

Neste post vou ensinar como exibir as datas dos seus posts na forma de calendário assim como está aqui no Templates para VOCÊ.
Fonte:Tradução do Tutorial deste link Blogger Buster

1º Passo: Vá em Configurações ► Formatação ► Altere o formato da data para Ano-Mês-Dia como na figura abaixo:


2º Passo: Vá em Modelo ► Editar HTML ► Clique em Expandir modelos de widgets ► Encontre o código <data:post.dateHeader/> (Utilize o atalho Ctrl+F)
A linha que você encontrou vai estar desta forma: (Pode talvez, no lugar do h2 estar h3, mas não tem problema)
<h2 class='date-header'><data:post.dateHeader/></h2>

► Substitua o h2 ou h3 por div, ficando assim:
<div class='date-header'><data:post.dateHeader/></div>

Salve seu template clicando em SALVAR MODELO

3º Passo: Pode desmarcar a caixinha Expandir modelos de widgets ►
Cole entre as tags ]]></b:skin> e tag </head> este código a seguir:

<!-- calendar widget -->
<script src='http://bloggerbuster.com/scripts/fastinit.js'/>
<script src='http://bloggerbuster.com/scripts/prototype-1.5.0.js'/>
<script src='http://bloggerbuster.com/calendar.js'/>
<link href='http://bloggerbuster.com/calendar.css' rel='stylesheet' type='text/css'/>
<!-- end calendar widget -->

Salve seu template clicando em SALVAR MODELO

4º Passo: Se você quiser configurar a imagem do calendário copie este código abaixo e cole acima da tag: ]]></b:skin> ► Sugiro que Apague a linha:
<link href='http://bloggerbuster.com/calendar.css' rel='stylesheet' type='text/css'/> do código anterior

/*-------Calendário do Post------*/
span.cal {
background:transparent url('imagem do seu calendário') no-repeat scroll 0%;
float:left;
margin-right: 10px;
height:36px;
width:35px;
font-family:"Helvetica",Tahoma,Arial;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
}
span.cal_month {
color:#FFFFFF;
display:block;
font-size:10px;
line-height:11px;
margin-left:1px;
padding-top:1px;
text-align:center;
text-transform:uppercase;
}
span.cal_day {
color:#999999;
display:block;
font-size:18px;
line-height:18px;
margin-left:1px;
padding-top:4px;
text-align:center;
text-transform:uppercase;
}
.sidebar {
margin-bottom: 20px;
}

No próximo post explico como mudar a imagem do calendário!

Links com folhas de calendário:
Link 1
Link 2