CÓMO PONER LA FECHA REDONDEADA EN BLOGGERTienes que añadir en CSS:
.date-header span {
padding:23px 7px 23px 7px;
border-radius: 100px;
/*pb*/
}
padding:23px 7px 23px 7px;
border-radius: 100px;
/*pb*/
}
Nota:
A) Eso sí, el padding ese es el que te he puesto de ejemplo, pero necesitarás cambiarlo dependiendo del tamaño de tu fuente.
Es decir, si la fecha la tienes con una fuente más grande, necesitarás un círculo más grande, y por tanto deberás ajustar el padding.
El primer número (23 px en el ejemplo) es el margen/espacio que le das 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 debes 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. Piensa que la fecha por defecto, si le pones color de fondo, es cuadradita.
A) Eso sí, el padding ese es el que te he puesto de ejemplo, pero necesitarás cambiarlo dependiendo del tamaño de tu fuente.
Es decir, si la fecha la tienes con una fuente más grande, necesitarás un círculo más grande, y por tanto deberás ajustar el padding.
El primer número (23 px en el ejemplo) es el margen/espacio que le das 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 debes 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. Piensa que la fecha por defecto, si le pones color de fondo, es cuadradita.
A 0% es totalmente cuadrada y basándote en eso puedes ir probando diferentes opciones hasta encontrar tu redondel. ;)
Si te queda muy pegado al título del post sólo tienes que usar también este código, poniéndolo justo debajo pero con al menos 2 intros de separación.
h3.post-title {
padding-top:1em;
/*pb*/
}
padding-top:1em;
/*pb*/
}
Puedes cambiar el 1em por un valor mayor o menor dependiendo de si quieres darle más
o menos espacio entre el círculo y el título del post.
Además también le puedes dar valores decimales, no sólo números enteros. (0.5em)
Espero que te haya gustado.
Besos,
