Edita la fecha de tus entradas (+ estilo minimalista)

Para editar nuestra fecha, primero que nada nos dirigimos a Plantilla / Edición HTML / & buscamos con CRTL + F, la siguiente linea:

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

Encontraras la misma linea DOS veces. Cambia LAS DOS LINEAS que encuentres..

Una vez encontramos esto, lo reemplazamos por lo siguiente:

<div class='date-posts'><data:post.dateHeader/></div>

Por ultimo, volvemos a buscar en nuestra plantilla:

]]></b:skin>

& ARRIBA de ello, pegamos el código CSS de nuestro efecto:

.date-posts {
position: absolute;
top: 7px;
left: -90px; /* POSICION CON EL CUERPO DE LA ENTRADA */
width: 50px; /* ANCHO */
height: 40px; /* LARGO */
padding: 15px 10px;
background: #51CDC8; /* FONDO */
font-size: 8px!important; /* TAMAÑO DEL TEXTO */
color: #FFFFFF; /* COLOR DEL TEXTO */
border: 1px solid #FFF; /* TIPO DE BORDES */
border-radius: 0px;
}
/* Luego de editar en general nuestra fecha de los post, podemos agregarle efectos cuando se coloca el cursor sobre esta; para esto editaremos el CSS "hover" de nuestra fecha */
.date-posts:hover {
position: absolute;
top: 7px;
left: -90px; /* POSICIÓN CON EL CUERPO DE LA ENTRADA */
width: 50px; /* ANCHO */
height: 40px; /* LARGO */
padding: 15px 10px;
background: #51CDC8; /* FONDO */
font-size: 8px!important; /* TAMAÑO DEL TEXTO */
color: #FFFFFF; /* COLOR DEL TEXTO */
border: 1px solid #FFF; /* TIPO DE BORDES */
border-radius: 0px;
}

Editamos lo marcado e indicado en el código.
Para saber como editar los bordes, mira este tutorial: Bordes CSS; también recomiendo, para crear efectos llamativos al pasar el cursor (lo indicado en el código como "hover") podemos utilizar los siguientes tutoriales:
Texto con sombra.
Como colocar efectos con animación.

Estilo Minimalista de THE CIRCUS:

El estilo que tengo yo en la fecha de los post, es algo simple, solamente utilizando los colores que predominan en el diseño del blog, los coloque de forma donde ambos se notaran y no perdieran protagonismo ninguno.
Sencillamente edite solo el comienzo del código anterior de esta forma:
(esta parte seria el código CSS que se sitúa debajo de la linea ]]></b:skin>)

.date-posts {
padding: 15px 10px;
width: 50px;
height: 40px;
background: #51CDC8;
position: absolute;
top: 7px;
left: -90px;
font-size: 8px!important;
border: 5px solid #eee;
color: #fff;
text-transform: uppercase;
}

sin agregarle un efecto "hover" para no sobrecargar & que dejara de ser sencillo.
Espero les sea útil, y tenga en cuenta que al elegir los colores que usaran, que estos sean los que ya utilizaron en el diseño del blog; el agregar una variedad de colores (distintos) lleva a desentonar el diseño & provoca que nada convine luego.

Nos vemos en la próxima entrada,
saludos mágicos!
ヾ（*⌒ヮ⌒*）ゞ