Fecha tipo calendario al lado de cada post

Si se dan cuenta en mi sitio encima de cada entrada que se publica siempre aparece un pequeño colendario de azul y gris oscuro,este truco es muy bueno ya que es mucho mas profesional y le dan mucha mas vida al diseño de tu blog.

Su instalación es muy fácil solo deben pegar los códigos en los lugares exactos.

Empezemos:

1. ve a configuración y seleccionas formato luego seleccionas Formato de cabecera de la fecha y seleccionas la penúltima opción del desplegable que es algo así 27 abril 2011.

2. Luego vas a Edición de HTML Expandir plantillas de artilugios y coloca antes de </head> este código:

<script type='text/javascript'>
//<![CDATA[
var ultimaFecha;
function remplaza_fecha(d){
if (d == "") {
d = ultimaFecha;
}
var da = d.split(' ');
dia = "<strong class='fecha_dia'>"+da[0]+"</strong>";
mes = "<strong class='fecha_mes'>"+da[1].slice(0,3)+"</strong>";

anio = "<strong class='fecha_anio'>"+da[2]+"</strong>";
document.write(dia+mes+anio);
ultimaFecha = d;
}
//]]>
</script>

3. Luego buscamos en la plantilla esta línea:

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

Cámbiala por este código:

<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>
<b:else/>
<div id='fecha'>
<script>remplaza_fecha('');</script>
</div>

ó sino les sale bien el resultado prueba con esta:

<b:includable id='post' var='post'>

Ahí no lo debes reemplazar debes pegarlo justo debajo.

4. para terminar pega este código antes de ]]></b:skin>

/* Calendario-Fecha
-------------------- */

#fecha {
display: block;
float:right;
margin: 0 13px 0 0;
padding: 0 13px 8px 10px;
color: #333;
background: transparent url(url de la imagen como calendario) no-repeat;
border: 0;
text-transform: uppercase;
}

.fecha_mes {
display: block;
font-size: 10px;
font-weight:bold;
}

.fecha_anio {
display: block;
font-size: 10px;
}

.fecha_dia {
display: block;
font-size: 16px;
font-weight:bold;
}