Cómo poner la fecha redonda o en un círculo en Blogger

Mi amiga Ana, la creativa gráfica con la que hago los diseños de blogs, hablando un día de no-sé-qué me dijo que en Blogger no se podía poner la fecha de manera que se viera sobre un redondel o circulito.

Y yo: ¿Cómo que no?

Y ella: Pues porque se lo pregunté a... *bip* (que no es plan de decir el nombre - alguien que tiene cursos para blogs) ...y me dijo que no se podía, que tenía que ser un blog de Wordpress.

De esto hace siglos ya. Tranquilamente 6 meses o más.

Y a mi me pareció muy raro, porque poder se puede hacer de todo, otra cosa es que no sea tan fácil dar con ello; pero vamos, que lo dejé ahí y nunca me lo planteé más. Yo casi como que hasta asumí que no se podía.

Hasta que hace poco, no sé cómo, diseñando el blog de Diario de Imagen y Estilo surgió la idea de poner la fecha de forma redondeada para hacerlo un poco más especial.

Así que le dije: Dame un par de días que veo si sé hacerlo. 

Obvio que lo primero que hice fue buscar en Google jaja. Pero no lo encontré.. :(

Y entonces pensé: a ver Blanca, piensa un poco.

Y la verdad que debería pensar más a menudo, porque di con ello muy fácilmente al final. Hay otras cosas que me cuesta más sacarlas, que escribir CSS a veces es como una lengua cualquiera, tú puedes hablar un poco, pero si no es tu idioma, igual no te expresas bien o con propiedad, y no te entienden los nativos.

Y con esto igual. Con el añadido de que si no pones exactamente lo que tienes que poner... no sale :P

Pero bueno, ahora que he dado con ello, para vosotras es muy fácil, porque es solo cuestión de copiar y pegar. Y como estoy contenta por mi cumple-blog os lo voy a explicar :)

Necesitáis añadir en CSS:

.date-header span {
padding:23px 7px 23px 7px;
border-radius: 100px;
/*pb*/
}

Nota: 

A) Eso sí, el padding ese es el que le he puesto al blog de Diario de Imagen y estilo, pero necesitareis cambiarlo dependiendo del tamaño de vuestra fuente.

Es decir, si la fecha la tenéis con una fuente más grande, necesitaréis un círculo más grande, y por tanto deberéis ajustar el padding.

El primer número (23 px en el ejemplo) es el margen/esapacio que le damos arriba. Es decir, una fecha con el primer número a 20 o 30 y los demás a cero, aparecerá con color por arriba pero no en el resto de los lados.

El segundo valor es el de la derecha. El siguiente el de abajo. Y el último el margen de la izquierda.

Entonces, para que sea un círculo perfecto, obviamente arriba y abajo debéis ponerle el mismo valor, o sino no será un círculo. Y a un lado y al otro lo mismo.

B) Y luego el 100% es lo que lo redondea del todo. Pensad que la fecha por defecto, si le ponemos color de fondo, es cuadradita.

Mirad como queda si le pongo 0 en el radio del borde:

En cambio, si le pongo un valor se me van redondeando las esquinas:

Y si le pongo 100, pues ya se me redondean lo máximo.

Nota 2: 

Como al hacerlo círculo tuve que estirar el margen de color hacia abajo, el título me quedaba muy pegado a la fecha, así que tuve que darle algo de espacio entre la fecha y el título del post.

Para ello puse en CSS:

h3.post-title {
padding-top:1em;
/*pb*/
}

De este modo os separa el título del post de la fecha.

Podéis cambiar el 1em (otra unidad de medida, que no es píxeles, un día lo vemos) por un valor mayor o menor dependiendo de si queréis darle más o menos espacio entre el círculo y el título del post.

Además también le podéis dar valores decimales, no sólo números enteros.

Eso sí, pensad que HTML y CSS son idiomas basados en el inglés. Los valores decimales se escriben con punto (0.5em), que con comas como sería en castellano no funcionan.

Y eso es todo señores.

Espero que os haya gustado.

No olvidéis que el plazo de participación del sorteo de las 3 cajas de Crafty Box está abierto hasta el lunes que viene a las 11 h, momento en el que comenzará OTRO sorteo... :)

Podéis leer cómo participar y apuntaros pinchando aquí.

Un besazo,