Continuando la personalización de mi blog de aprendizaje, hoy voy a modificar la fecha para dar un mayor realce a esta información.
Configuración formato fecha
Empiezo por algo sencillo y básico como es configurar el formato de fecha a través del menú de Blogger.
Accedo a Configuración-Idioma y formato.
Hacemos clic con el ratón sobre Formato de cabecera de fecha. Se despliega un menú y seleccionamos la opción que más nos convenga.
Ya tengo seleccionado el formato pero quiero personalizar la fecha en cuanto a tamaño, letra, etc.
Esto me obliga a trabajar con CSS.
Personalizar fecha del blog añadiendo código CSS
La forma más fácil y rápida es añadiendo código CSS a la plantilla mediante el menú de blogger (como ya he hecho en entradas anteriores).
Para eso me iría al menú de Plantilla-Personalizar.
Seleccionaría Avanzado-Añadir CSS.
Y añadiría por ejemplo el código siguiente,
.date-header span { color: yellow; background-color: navy; font-size: 12px; }
El texto se presenta en color amarillo (yellow) con fondo en color azul navy y tamaño de 12px.
Personalizar fecha del blog modificando HTML de la plantilla (tamaño y color letra)
La opción anterior es más rápida y cómoda, pero tras lo explicado en la entrada Personalizar pestaña seleccionada del menú páginas del blog, en donde he comprobado que todo el código CSS que se va añadiendo de esta forma es fácil duplicarlo, opto por añadir formato editando directamente la plantilla del blog mediante HTML.
Para eso voy al menú Plantilla-Editar HTML.
Se abre la ventana donde se muestra el código de toda la plantilla. Me posiciono sobre cualquier punto de esta ventana, tecleo CTRL + F y en el buscador escribo date-header span.
Este código forma parte del grupo /*Posts (entradas).
En principio solo hay las siguientes líneas con una única propiedad que define el color del texto.
date-header span {
color:
$(date.header.color);
}
Como todo lo que está encabezado por el signo $ puede modificarse, elimino esta línea y añado las siguientes líneas (en azul) que ya escribí en el caso anterior cuando añadí directamente el código CSS accediendo a la opción de menú "Avanzado-Editar CSS".
.date-header span { color: yellow; background-color: navy; font-size: 12px; } El resultado es el mismo.
- color;_ define el color del texto, en este ejemplo es yellow (amarillo).
- background-color;_define el color del elemento que contiene la fecha., en este ejemplo el color navy.
- font-size;_se establece un tamaño de letra de 12px.
Personalizar fecha del blog modificando HTML de la plantilla (tipo de letra y bordes definidos)
Ahora voy a añadir más propiedades (en rojo)
.date-header span {
color: navy;
font-size: 15px;
font-family: gulim, sans-serif;
text-align: justify;
border-radius:5px;
background: radial-gradient(circle, burlywood 20%, white 80%, grey);
margin:0px;
padding:6px 10px;
}
- font-family;_Esta propiedad determina la fuente, en este caso es la fuente gulim y añado (separado por comas) sans-serif para que sea la segunda alternativa si la primera no se puede mostrar.
- text-align;_El texto con la fecha estará justificado.
- border-radius;_El borde del elemento que contiene la fecha tendrá sus esquinas redondeadas con un valor de 5px.
- background:radial gradient;_Se establece un fondo degradado radial . Ver entrada Personalizar el fondo del menú horizontal en el blog.
- margin; padding;_Establezco valores para el margen y relleno. Ver entrada Margin, padding y border.
La fecha tras estos cambios es la que se muestra en la siguiente imagen.
Le he dado un efecto de etiqueta metálica con reflejos en las tonalidades base de este blog.