Fecha tipo calendario en Blogger y Wordpress

Bueno en lo que arreglo las cosas en el blog, les sigo trayendo pequeños posts :3 ... pequeños pero útiles xD, y en esta ocasión les traigo un código para que le den estilo a sus fechas con una linda forma de calendario, como la que tengo yo justo después del titulo del post :3 ^^ ... es sencillo, fácil y rápido XD que solo basta con agregar y editar sus fechas :3 ... bueno comencemos! primero con Blogger ya que era mi sistema de blogs y ahi la cosa es más fácil XP

Este tuto te dará un resultado parecido a esto ->
Antes de comenzar debes descargarte este pack de fondos de calendario, igualmente puedes crear los tuyos (las medidas son 60x60 px)... sube la imagen que más te guste a un host (imageshack, dropbox, tinypic, etc.) y copia la url y la pegas en el pedazo de código que dice "background: transparent url(URL de la imagen) no-repeat;" y listo :3 .

BLOGGER

1.- Poner la fecha del blog en formato dia-mes-año sin espacio o caracteres, esto se hace entrando a tu blog, en el menú izquierdo entrar a "Diseño" -> "Entradas del blog" -> editar.

2.- Después ir a "Plantilla" y seleccionar "HTML", ahi buscar [html]<h2 class='date-header'><span><data:post.dateHeader/></span></h2>[/html], la primera, borrarla y en su lugar colocar:
[html]<div id='Fecha'>
<script>cambiarFecha(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='Fecha'>
<script>cambiarFecha(&#39;&#39;);</script>
</div>[/html]

3.- antes de [html]</head>[/html] colocar:

[html]<script type='text/javascript'>
//<![CDATA[
var FechaCalendario;
function cambiarFecha(d){
if (d == "") {
d = FechaCalendario;
}
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(mes+dia+anio);
FechaCalendario = d;
}
//]]>
</script>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>

/* Fecha tipo calendario
----------------------------------------------- */
#Fecha {
background: transparent url(URL de la imagen) no-repeat;
display: block;
width:60px;
height:60px;
float: left;
margin: 5px 2px 0 -70px;
padding: 0 0 8px 0px;
border: 0;
text-transform: uppercase;
}

.fecha_mes {
display: block;
font-size: 15px;
font-weight:bold;
margin-top:-1px;
text-align:center;
color:#282828; /* Color del mes */
}

.fecha_dia {
display: block;
font-size: 28px;
font-weight:bold;
margin-top:-8px;
text-align:center;
color:#282828; /* Color del día */
}

.fecha_anio {
display: block;
font-size: 10px;
margin-top:-8px;
text-align:center;
color:#282828; /* Color del año */
}
</style>
</b:if>[/html]

4.- Obviamente guarda los cambios.

Eso es todo para que ya tengan su fecha modificada :3 ... ahora vamos a ver como hacerle para wordpress.

WORDPRESS

Este tuto solo sirve para wordpress alojados en servidores "propios", si usas wordpress desde la misma plataforma online de wp entonces no sirve, ya que tienes que tener total control sobre todo el wp; dicho esto comencemos :3

1.- En tu archivo "single.php" / "post.php" / "page.php" / "index.php" o donde quieras, debes borrar tu configuración de como mostrar fecha por la siguiente:
[php]<div id='Fecha'><strong class='fecha_mes'><?php the_time('M') ?></strong><strong class='fecha_dia'><?php the_time('d') ?></strong><strong class='fecha_anio'><?php the_time('Y') ?></strong></div>[/php], guarda y sube el/los archivos al host.

2.- Ahora en tu hoja de estilos principal del blog (generalmente "style.css") debes colocar el css que hará la magia -w- ...
[css]/* Fecha tipo calendario
----------------------------------------------- */
#Fecha {
background: transparent url(URL de la imagen) no-repeat;
display: block;
width:60px;
height:60px;
float: right;
margin: 0;
padding: 0;
border: 0;
text-transform: uppercase;
}

.fecha_mes {
display: block;
font-size: 15px;
font-weight:bold;
margin-top:-3px;
text-align:center;
color:#fff; /* Color del mes */
}

.fecha_dia {
display: block;
font-size: 28px;
font-weight:bold;
margin-top:-3px;
text-align:center;
color:#666; /* Color del día */
}

.fecha_anio {
display: block;
font-size: 10px;
margin-top:-6px;
text-align:center;
color:#666; /* Color del año */
}[/css], guarda el archivo y subelo al host.

Y listo!! creo que es más sencillo en WP xD... pero en fin :3 ^^! ya tenemos nuestra fecha con un bonito estilo, si en dado de los casos la fecha te aparece chueca o muy junta o algo, trata de jugar (prueba y error) con "margen-top" del estilo a ver como se ve mejor y si quieren cambiar el color solo cambienlo donde indica "Color del mes,dia,año" y ya, cualquier duda escribanla en los comentarios :3 ^^ y trataré de solucionarla, yo misma he probado ambos códigos en blogger y wordpress y funcionan, no deberian darles problemas :3 nos vemos!!