Tutorial de blogger: ¿Como cambiar el aspecto de la fecha?

¡¡Hola de nuevo letritas!! Como podreis haber notado, que cambiado un poco el aspecto del blog... como ya os dije en al otro tutorial (que por si os interesa hacer click aquí) que estaba haciendo reformas en el blog, y sí, ahí estaba yo con poco experiencia combinando colores si tener ni idea. Así me inform´un poco sobre el asunto y ya que creo que he acabado por fin el diseño y que he adquirido algunos conocimientos, he pensado en enseñaros lo que yo he aprendido. Pero para no avasallaros con tutoriales, hoy solo voy a hablaros sobre como cambiar el aspecto de la fecha que sale encima del titulo en una entrada de tu blog.

Como podreis haber observado en mi blog (y en muchas otros) la fecha esta metida en un cuadrito o en una redonda o en diversas figuras. Bueno, pues eso es lo que os enseñaré, y además también os añadiré algo muy simple pero que está bien saberlo, y voy a empezar explicándoos eso mismo.


¿Como puedo cambiar el formato de la fecha?

1. Vamos a ir a el escritorio de nuestro blog y en la barra izquierda vamos a hacer click en en botón que pone "Configuración" y todo seguido dentro de este mismo apartado a "idioma y formato".

2. Todo seguido nos dirigimos a donde pone "Fecha" y allí podemos cambiar el formato de la fecha donde pone "formato de cabecera que fecha" del modo que queramos en lo tipo que nos salgan, que son estos:

3. Y es así de fácil, pero no te olvides de guardar los cambios haciendo click en el botón de "Guardar configuración".

¿Y el aspecto?

Esta imagen la he sacado de internet (no la he editado yo)

1. Si queremos que a fecha nos aparezca en un cuadradito o en una redonda, vamos a tener que empezar yendo a "Plantilla" que nos aparece la barra izquierda del escritorio. Todo seguido a Personalizar > Avanzado > Añadir CSS.

2. En el recuadro que nos aparece tenemos que copiar el siguiente código:

.date-header span {
 color: #333333;
 background-color: #ACFA58;
 font-size: 9px;
 padding:30px 0px 22px 5px;
 border-radius:30px; }

3. El color de fondo. Con el código que acabamos de copiar nos saldrá una redonda verde, ¿vale? Pero pongamos que tu lo quieres de color azul (por ejemplo) pues lo que vas a tener que cambiar va a ser lo que he marcado con color rojo (#ACFA58) y lo vas a cambiar por el codigo de color (que en el caso de azul seria el código #009EFF) pero como soy tan enrollada (se nota que soy muy modesta no? xD) os dejo una página donde podeis escoger el color y ella os dice el código (haz click para ir a la página).

4. El color de las letras. Con el codigo que hemos copiado nos saldrán negras, pero si quieres ponerle otro color solo tienes que cambiar las letras que están en azul (#333333) por el código de color del color que tu quieras las letras.

5. El tamaño del texto. Para hacer la letra más grande o más pequeña solo tienes que cambiar el número que está en color verde (9px), si la quieres más grande puedes ir probando con números como 12 o 14 y si la quieres más pequeña con números como 6 o 7. Pero siempre tienes que poner detrás del número las letras px, no te olvides.

6. Medidas de la caja. Con esto me refiero a que si quieres que te salga una redonda, un cuadrado, un rectangulo... lo que quieras. Pues vas a tener que cambiar los números que están en rosa (30px 0px 22px 5px), y bien como es un poco difícil os voy a dejar las medidas con las correspondientes figuras:

- Redonda: tal y como está
- Cuadrado: 30px 0px 22px 5px
- Rectángulo: 12px 20px 11px 25px
- Rectángulo (un poco menos ancho): 12px 0px 11px 5px

Claro que vosotros podéis toquetear un poco los números para adquirir la forma deseada.

7. Redondear el borde de la figura. Para redondear las esquinas del cuadrado o el rectangulo teneis que cambiar los número que está en color naranja (30px) y poner un número más alto si quieres redondearlo más y un número más bajo si quieres redondearlo menos. Pero siempre tienes que poner detrás del número las letras px, no te olvides.

Bueno... y la entrada se me está haciendo bastante largita así que aquí la dejo, y por cierto, espero que os haya parecido útil y que si lo haceis no dudeis en dejarme el link a vuestro blog para veros como os a quedado.

PD: Si tenéis alguna duda podéis dejarla en los comentarios :3